.page_atelier {
  width: 100%;
}

/* === Boutons - Style de base === */
.page_atelier button {
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 10pt;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  background-color: #f0f2f5;
  color: #333;
}

.page_atelier button:hover {
  background-color: #e0e3e8;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.page_atelier button:active {
  transform: translateY(0);
  box-shadow: none;
}

.page_atelier button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* === Header === */
.header-atelier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8f9fb 0%, #eef0f4 100%);
  border-bottom: 2px solid #dde0e6;
}

.ha-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ha-title h1 {
  margin: 0;
  font-size: 15pt;
  font-weight: 700;
  color: #333;
}
.ha-title-icon {
  font-size: 14pt;
  color: var(--main-bg-color);
}

.ha-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ha-btn-todo {
  background-color: #5c6bc0 !important;
  color: white !important;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
}
.ha-btn-todo:hover {
  background-color: #4a5ab5 !important;
}

.ha-new-ticket-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ha-btn-new {
  background: var(--main-bg-color) !important;
  color: white !important;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px 0 0 8px;
}
.ha-btn-new:hover {
  filter: brightness(1.1);
}
.ha-btn-new:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
.ha-btn-new-arrow {
  background: var(--main-bg-color) !important;
  color: white !important;
  padding: 8px 10px;
  border-radius: 0 8px 8px 0;
  border-left: 1px solid rgba(255,255,255,0.3) !important;
  cursor: pointer;
}
.ha-btn-new-arrow:hover {
  filter: brightness(1.1);
}
.ha-ticket-tag-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 8px 0;
  min-width: 200px;
  margin-top: 4px;
  z-index: 200;
  animation: navDropdownFadeIn 0.15s ease;
}
.ha-ticket-tag-dropdown .tl-filter-dropdown-title {
  padding: 4px 12px;
}
.ha-ticket-tag-dropdown .tl-filter-dropdown-item {
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ha-ticket-tag-dropdown .tl-filter-dropdown-item:hover {
  background: #f0f2f5;
}

.atelier_moitier_1 {
  width: 60%;
  height: calc(100vh - 122px);
  vertical-align: top;
  overflow: auto;
}

/* .atelier_moitier_2 et .vertical sont définis plus bas dans la section PANNEAU DETAIL TICKET */

.filtre {
  cursor: pointer;
}

/* Bouton toggle toolbar mobile : caché sur desktop */
.tl-toolbar-mobile-toggle {
  display: none;
}

/* === Barre d'outils tickets (tl-toolbar) === */
.tl-toolbar {
  padding: 0 !important;
  background: #f8f9fb;
  border-bottom: 1px solid #e0e3e8;
}
.tl-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  flex-wrap: wrap;
}
.tl-toolbar-row:not(:last-child) {
  border-bottom: 1px solid #ecedf0;
}

/* Ligne 1 : gauche / centre / droite */
.tl-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tl-toolbar-center {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}
.tl-toolbar-right {
  flex-shrink: 0;
}

/* Bouton refresh */
.tl-btn-refresh {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: #e8f5e9 !important;
  color: #2e7d32 !important;
  font-size: 11pt;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tl-btn-refresh:hover {
  background-color: #c8e6c9 !important;
}
.tl-btn-refresh-loading {
  cursor: default;
  opacity: 0.7;
}

/* Select reload */
.tl-select-reload {
  height: 30px;
  width: 48px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: white;
  font-size: 9pt;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.tl-select-reload:focus {
  border-color: var(--main-bg-color);
}

/* Checkboxes statut */
.tl-status-check {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 9pt;
  font-weight: 500 !important;
  color: #555;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
  width: auto !important;
  margin: 0 !important;
}
.tl-status-check:hover {
  background: #eef0f4;
}
.tl-status-check input[type="checkbox"] {
  accent-color: var(--main-bg-color);
  margin: 0;
}

/* Lien cloturés */
.tl-link-closed {
  font-size: 8.5pt;
  color: #888;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.tl-link-closed:hover {
  color: var(--main-bg-color);
  background: #e0f2f1;
}
.tl-link-closed .fa {
  margin-right: 3px;
}

/* Menu filtre (engrenage) */
.tl-filter-menu {
  position: relative;
  display: inline-block;
  margin-left: 6px;
}
.tl-btn-filter-toggle {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 6px !important;
  background: #f0f0f0 !important;
  color: #777 !important;
  font-size: 10pt;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #ddd !important;
}
.tl-btn-filter-toggle:hover {
  background: #e0e3e8 !important;
  color: #444 !important;
}
.tl-filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 8px 0;
  min-width: 200px;
  margin-top: 4px;
  /* Borne la hauteur pour rester dans le panneau (.atelier_moitier_1 overflow:auto),
     sinon le bas du menu est rogné. Défilement interne si le contenu dépasse. */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
.tl-filter-dropdown-title {
  font-size: 8.5pt;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 14px 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}
.tl-filter-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px !important;
  font-size: 9.5pt;
  font-weight: 400 !important;
  color: #444;
  cursor: pointer;
  transition: background 0.12s ease;
  width: auto !important;
  margin: 0 !important;
}
.tl-filter-dropdown-item:hover {
  background: #f5f7fa;
}
.tl-filter-dropdown-item input[type="checkbox"] {
  accent-color: var(--main-bg-color);
  margin: 0;
}

/* Séparateur dans le dropdown */
.tl-filter-dropdown-separator {
  height: 1px;
  background: #eee;
  margin: 6px 0;
}

/* Color picker pour sévérité */
.tl-filter-color-item input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: none;
}
.tl-filter-dropdown-reset {
  padding: 6px 14px;
  text-align: right;
}
.tl-btn-reset-colors {
  font-size: 8pt !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  background: #f5f5f5 !important;
  color: #777 !important;
  border: 1px solid #ddd !important;
  cursor: pointer;
}
.tl-btn-reset-colors:hover {
  background: #eee !important;
  color: #444 !important;
}

.tl-filter-color-preview {
  width: 40px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
  margin-left: auto;
  flex-shrink: 0;
}

/* Ligne 2 : filtres avancés */
.tl-toolbar-filters {
  gap: 6px;
}

/* Recherche de contenu (description / remarque / historique) — repliée par
   défaut (icône seule), déployée au survol / focus / recherche active. */
.tl-content-search {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #cfd4dc;
  border-radius: 16px;
  padding: 2px;
  height: 30px;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tl-content-search-icon {
  color: #98a0ab;
  font-size: 10pt;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.tl-content-search-icon:hover {
  color: var(--main-bg-color);
}
.tl-content-search-input {
  border: none !important;
  outline: none;
  background: transparent;
  font-size: 9.5pt;
  width: 0;
  min-width: 0;
  opacity: 0;
  padding: 0;
  transition: width 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
}
/* Déploiement */
.tl-content-search:hover .tl-content-search-input,
.tl-content-search:focus-within .tl-content-search-input,
.tl-content-search.tl-content-search-active .tl-content-search-input {
  width: 220px;
  max-width: 38vw;
  opacity: 1;
  padding: 0 4px;
}
.tl-content-search.tl-content-search-active {
  border-color: var(--main-bg-color);
  box-shadow: 0 0 0 2px rgba(38, 154, 142, 0.15);
}
.tl-content-search-clear {
  border: none;
  background: #f0f1f4;
  color: #555;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.tl-content-search-clear:hover {
  background: #e0e2e6;
}

/* Onglets type */
.tl-type-tabs {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tl-type-tab {
  padding: 4px 12px !important;
  border-radius: 6px !important;
  font-size: 9pt !important;
  font-weight: 500;
  border: 1px solid #ddd !important;
  background: white;
  color: #555 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tl-type-tab:hover {
  border-color: var(--main-bg-color) !important;
  color: var(--main-bg-color) !important;
}
.tl-type-tab-active {
  background: var(--main-bg-color);
  color: white !important;
  border-color: var(--main-bg-color) !important;
}
.tl-type-badge {
  font-size: 7.5pt;
  color: #e65100;
  margin-left: 2px;
}

/* ============================================
   LISTE DES TICKETS (tl-*)
   ============================================ */
.list-ticket {
  overflow-y: auto;
  overflow-x: hidden;
}
/* --- Table générale --- */
.atelier_moitier_1 table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: linear-gradient(180deg, #eef0f4 0%, #e4e7ec 100%);
}
/* --- En-tête --- */
.tl-header th {
  padding: 10px 10px;
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.tl-th-tiers { max-width: 18%; }
.tl-th-id { max-width: 10%; }
.tl-th-status { max-width: 18%; }
.tl-th-desc { width: 60%; }
.tl-th-age { max-width: 10%; text-align: center !important; }

/* --- Recherche dans en-tête --- */
.tl-search-icon {
  cursor: pointer;
  color: #999;
  margin-left: 6px;
  font-size: 9pt;
  transition: color 0.2s ease;
}
.tl-search-icon:hover {
  color: var(--main-bg-color);
}
.tl-search-input {
  width: 80px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 9pt;
  outline: none;
}
.tl-search-input:focus {
  border-color: var(--main-bg-color);
  box-shadow: 0 0 0 2px rgba(38, 154, 142, 0.12);
}
.tl-search-id {
  width: 55px;
}

/* --- Lignes de tickets --- */
.tl-row {
  border-bottom: 1px solid #eee;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.tl-row:nth-child(even) {
  background-color: #f7f8fa;
}
.tl-row:nth-child(odd) {
  background-color: #ffffff;
}
.tl-row:hover {
  background-color: #edf2ff !important;
}
.tl-row td {
  padding: 7px 10px;
  vertical-align: middle;
  font-size: 9.5pt;
}

/* Ligne sélectionnée */
.tl-selected {
  background-color: #e8f4f2 !important;
}
/* Sélection : cadre fin (bordure haut + bas) en couleur principale sur la ligne,
   colonnes ID→Âge. Appliqué aux cellules (pas au <tr>) pour rester aligné sur
   une seule ligne même quand la cellule tiers est fusionnée (rowspan) ; la
   colonne tiers est exclue et garde seulement son fond coloré. */
.tl-selected td:not(.tl-tiers) {
  border-top: 2px solid var(--main-bg-color);
  border-bottom: 2px solid var(--main-bg-color);
}
.tl-selected:hover {
  background-color: #ddeeed !important;
}

/* Séparateur de groupe tiers */
.tl-group-first {
  border-top: 2px solid #d0d4da;
}

/* --- Cellule Tiers --- */
.tl-tiers {
  vertical-align: middle !important;
  border-right: 1px solid #eee;
  background: #fafbfc;
}
/* Cellule tiers du ticket sélectionné : fond coloré + cadre haut/bas en couleur
   principale. Étant en rowspan, le cadre entoure toute la case du tiers. */
.tl-tiers.tl-selected-tiers {
  background: #e8f4f2 !important;
  border-top: 2px solid var(--main-bg-color);
  border-bottom: 2px solid var(--main-bg-color);
}
.tl-tiers-name {
  font-weight: 700;
  font-size: 10pt;
  text-decoration: none;
  display: block;
  line-height: 1.3;
}
.tl-tiers-name:hover {
  text-decoration: underline;
}
.tl-tiers-alias {
  font-size: 8.5pt;
  color: #888;
  font-style: italic;
  margin-top: 2px;
}
.tl-tiers-phone {
  font-size: 8.5pt;
  margin-top: 3px;
}
.tl-tiers-phone a {
  color: #666;
  text-decoration: none;
}
.tl-tiers-phone a:hover {
  color: var(--main-bg-color);
}
.tl-contract-icon {
  color: #ff9800;
  font-size: 9pt;
  margin-left: 4px;
  vertical-align: middle;
}

/* Sévérité : couleurs dynamiques appliquées via v-bind:style */

/* --- Cellule ID --- */
.tl-id {
  border-left: 4px solid transparent;
  white-space: nowrap;
}
.tl-id a {
  font-weight: 700;
  font-size: 11pt;
  color: var(--main-button);
  text-decoration: none;
}
.tl-id a:hover {
  text-decoration: underline;
}

/* Drapeaux (flags) */
.tl-flag {
  margin-left: 5px;
  font-size: 9pt;
  vertical-align: middle;
}
.tl-flag sup {
  font-size: 7pt;
  font-weight: 700;
}
.tl-flag-update {
  color: #f57c00;
}
.tl-flag-new {
  color: #e53935;
}

/* --- Alerte : ticket flaggé ET assigné à l'utilisateur connecté --- */
/* La couleur d'accent est personnalisable via --tl-mine-color (préférence utilisateur). */

/* Drapeau pulsant (halo qui respire) */
.tl-flag-mine {
  animation: tlFlagMinePulse 1.4s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes tlFlagMinePulse {
  0%   { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  50%  { filter: drop-shadow(0 0 5px var(--tl-mine-color, #ffb300)); transform: scale(1.25); }
  100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
}

/* Badge main qui salue (sur sa propre ligne) */
.tl-mine-badge {
  display: block;
  margin-top: 2px;
  font-size: 12pt;
  line-height: 1;
  transform-origin: 75% 80%;
  animation: tlMineWave 1.6s ease-in-out infinite;
}
@keyframes tlMineWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

/* Accent : bordure gauche + léger fond teinté, uniquement sur la colonne ID */
.tl-row.tl-mine-alert .tl-id {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--tl-mine-color, #ffb300) 22%, transparent),
    color-mix(in srgb, var(--tl-mine-color, #ffb300) 6%, transparent) 60%,
    transparent);
  border-left-color: var(--tl-mine-color, #ffb300) !important;
  border-left-width: 5px !important;
}

/* Points de présence utilisateur */
.tl-presence-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}
.tl-presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: default;
}
.tl-presence-viewing {
  background-color: #fbc02d;
  box-shadow: 0 0 4px rgba(251, 192, 45, 0.5);
}
.tl-presence-editing {
  background-color: #43a047;
  box-shadow: 0 0 4px rgba(67, 160, 71, 0.5);
}
.tl-presence-popup {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 8px 12px;
  white-space: nowrap;
  z-index: 300;
  align-items: center;
  gap: 8px;
}
.tl-presence-wrapper:hover .tl-presence-popup {
  display: flex;
}
.tl-presence-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  flex-shrink: 0;
  font-size: 12px;
  color: #888;
}
.tl-presence-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tl-presence-info {
  display: flex;
  flex-direction: column;
}
.tl-presence-name {
  font-size: 9pt;
  font-weight: 600;
  color: #333;
}
.tl-presence-state {
  font-size: 8pt;
  color: #fbc02d;
  font-weight: 500;
}
.tl-presence-state-edit {
  color: #43a047;
}

/* --- Cellule État / Icônes --- */
.tl-status {
  white-space: nowrap;
}
.tl-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11pt;
}
.tl-icons > span {
  display: inline-flex;
  align-items: center;
}
.tl-wait-text {
  font-size: 7.5pt;
  color: #999;
  margin-left: 2px;
}
.tl-icon-phone {
  color: #43a047;
  font-size: 10pt;
}
.tl-icon-projet {
  color: #6a1b9a;
  font-size: 10pt;
}
.tl-projet-link {
  color: #6a1b9a;
  text-decoration: none;
  font-weight: 600;
  font-size: 10pt;
}
.tl-projet-link:hover {
  text-decoration: underline;
}
.tl-projet-link .fa {
  margin-right: 4px;
}
.tl-projet-link-dolibarr {
  color: #999;
  margin-left: 8px;
  font-size: 9pt;
}
.tl-projet-link-dolibarr:hover {
  color: #6a1b9a;
}
.tl-user {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
}
.tl-user .profileUserPhoto {
  width: 22px;
  height: 22px;
}
.tl-user .profileUserPhoto img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.tl-status .ticket_tag {
  margin-left: 4px;
  font-size: 7.5pt;
  padding: 2px 6px;
}

/* --- Cellule Description --- */
.tl-desc {
  word-break: break-word;
}
.tl-type-icon {
  margin-right: 6px;
  font-size: 10pt;
}
.tl-message {
  color: #444;
}

/* --- Cellule Âge --- */
.tl-age {
  text-align: center;
  white-space: nowrap;
  padding: 4px 8px !important;
  font-size: 9pt;
}
.tl-age-main {
  display: block;
  font-weight: 700;
  font-size: 9pt;
  line-height: 1.2;
}
.tl-age-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 8pt;
  line-height: 1.2;
}
/* Fond cellule = niveau dernière intervention */
.tl-age.tl-age-ok {
  background: transparent;
  color: #555;
}
.tl-age.tl-age-warn {
  background: #fef3e2;
  color: #c46210;
}
.tl-age.tl-age-crit {
  background: #e74c3c;
  color: #fff;
}


/* --- Lien filtre dans en-tête --- */
.list_ticket_filtre {
  text-decoration: none;
  cursor: pointer;
}
.list_ticket_filtre:hover {
  color: var(--main-bg-color);
}

/* .text-new-ticket, .id-new-ticket-div, .id-new-ticket sont définis dans la section MODAL NOUVEAU TICKET */

/* Boutons Nouveau ticket : utilise désormais le style .update (voir section boutons modales) */

/* .historique_system et .historique_autre sont définis dans la section PANNEAU DETAIL TICKET */

/* === Bouton Sauvegarder (disquette) et actions icônes === */
.update {
  float: right;
  width: 40px;
  height: 40px;
  margin: 8px;
  padding: 0;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14pt;
  cursor: pointer;
  background-color: #e3f2fd !important;
  color: #1565c0 !important;
}
.update:hover {
  background-color: #bbdefb !important;
}
.update:disabled {
  background-color: #f5f5f5 !important;
  color: #ccc !important;
  cursor: not-allowed;
  opacity: 0.5;
}

.update_click {
  float: right;
  padding: 10px;
  margin: 8px;
  font-size: 14pt;
  color: var(--main-bg-color);
}

.button-press {
  background-color: #e7e7e7;
  color: black;
}

/* La toolbar d'actions est maintenant gérée par .ticket-detail-toolbar */

/* === Boutons de statut (en bas du rapport) === */
.td-status-bar button.inline {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 9pt;
  font-weight: 500;
  border: 1px solid #ddd;
  background-color: #fafafa;
  color: #555;
}
.td-status-bar button.inline:hover:not(:disabled) {
  background-color: var(--main-bg-color);
  color: white;
  border-color: var(--main-bg-color);
}
.td-status-bar button.inline:disabled {
  background-color: var(--main-button);
  color: white;
  border-color: var(--main-button);
  opacity: 0.85;
  font-weight: 600;
}

/* === Bouton Clôturer === */
.page_atelier button.inline {
  border-radius: 6px;
}

/* === Boutons facturation (arrond_space) === */
.arrond_space {
  padding: 6px 14px;
  border-radius: 8px;
  background-color: #fff3e0 !important;
  color: #e65100 !important;
  border: 1px solid #ffcc80;
  font-size: 10pt;
  font-weight: 500;
}
.arrond_space:hover {
  background-color: #ffe0b2 !important;
  border-color: #ffb74d;
}

/* === Boutons dans modales === */
.modal-button button.update {
  float: none;
  display: inline-flex;
  margin: 8px;
}

.modal-button-list {
  margin: 5px;
  float: left;
}
.modal-button-list button,
.page_atelier .modal-button-list {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  font-size: 10pt;
  width: 100%;
  text-align: left;
}
.modal-button-list button:hover,
.page_atelier .modal-button-list:hover {
  background-color: var(--main-bg-color);
  color: white;
  border-color: var(--main-bg-color);
}

/* === Bouton Fermer dans modal TODO === */
.modal-header button {
  background-color: #ef5350 !important;
  color: white !important;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 500;
}
.modal-header button:hover {
  background-color: #d32f2f !important;
}

/* === Bouton OK / Confirmer dans modales === */
.page_atelier .modal-default-button {
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
}

/* === Couleurs des boutons d'action (.update) dans modales === */

/* Valider / Confirmer (vert) */
button.update.fa-plus-circle,
button.update.fa-envelope,
button.update.fa-user-plus,
button.update.fa-check,
button.update.fa-regular.fa-floppy-disk {
  background-color: #e8f5e9 !important;
  color: #2e7d32 !important;
}
button.update.fa-plus-circle:hover,
button.update.fa-envelope:hover,
button.update.fa-user-plus:hover,
button.update.fa-check:hover,
button.update.fa-regular.fa-floppy-disk:hover {
  background-color: #c8e6c9 !important;
}

/* Annuler / Fermer (rouge) */
button.update.fa-circle-xmark,
button.update.fa-xmark {
  background-color: #ffebee !important;
  color: #c62828 !important;
}
button.update.fa-circle-xmark:hover,
button.update.fa-xmark:hover {
  background-color: #ffcdd2 !important;
}

/* Délier (orange) */
button.update.fa-unlink {
  background-color: #fff3e0 !important;
  color: #e65100 !important;
}
button.update.fa-unlink:hover {
  background-color: #ffe0b2 !important;
}

/* Supprimer (rouge) */
button.update.fa-regular.fa-trash-can {
  background-color: #ffebee !important;
  color: #c62828 !important;
}
button.update.fa-regular.fa-trash-can:hover {
  background-color: #ffcdd2 !important;
}

/* Annuler / Retour (gris) */
button.update.fa-reply {
  background-color: #f5f5f5 !important;
  color: #616161 !important;
}
button.update.fa-reply:hover {
  background-color: #e0e0e0 !important;
}

/* === Tabs de filtre - garder le style main.css mais harmoniser === */
.page_atelier .tab button {
  border-radius: 6px;
  font-size: 9.5pt;
  padding: 6px 10px;
}

/* ============================================
   MODAL NOUVEAU TICKET (show_modal_new_ticket)
   ============================================ */

/* --- En-tête avec titre + bouton fermer --- */
.nt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--main-bg-color);
}
.model-new-ticket h3 {
  font-size: 15pt;
  color: var(--main-bg-color);
  margin: 0;
  padding: 0;
  border: none;
}
.nt-close {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  color: #888 !important;
  font-size: 12pt;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nt-close:hover {
  background: #ffebee !important;
  color: #c62828 !important;
}

/* --- Panneau latéral "tickets en cours du tiers" --- */
/* Conteneur flex : modale + panneau côte à côte, centrés */
.nt-modal-flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.nt-modal-flex .modal-container {
  margin-top: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
/* Panneau replié par défaut, déplié avec animation (slide depuis la droite) */
.nt-side-panel {
  align-self: stretch;
  width: 0;
  max-height: 90vh;
  margin: 10px 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-12px);
  transition: width 0.25s ease, opacity 0.25s ease, transform 0.25s ease, margin-left 0.25s ease;
}
.nt-side-panel.nt-side-open {
  width: 340px;
  margin-left: 14px;
  opacity: 1;
  transform: translateX(0);
}
.nt-side-inner {
  height: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 16px 18px;
  box-sizing: border-box;
}
.nt-side-header {
  font-size: 11pt;
  font-weight: 700;
  color: var(--main-bg-color);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--main-bg-color);
  white-space: nowrap;
}
.nt-side-loading,
.nt-side-empty {
  font-size: 9.5pt;
  color: #888;
  padding: 12px 4px;
  text-align: center;
}
.nt-side-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Carte ticket */
.nt-side-card {
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fafbfc;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.nt-side-card:hover {
  border-color: var(--main-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.nt-side-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.nt-side-id {
  font-weight: 700;
  font-size: 10.5pt;
  color: var(--main-button);
  cursor: pointer;
  text-decoration: none;
}
.nt-side-id:hover {
  text-decoration: underline;
}
.nt-side-sev {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nt-side-status {
  font-size: 8pt;
  font-weight: 600;
}
.nt-side-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nt-side-user .profileUserPhoto {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #eef0f4;
  color: #888;
  font-size: 9px;
}
.nt-side-user .profileUserPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nt-side-date {
  font-size: 8pt;
  color: #999;
  white-space: nowrap;
}
.nt-side-type {
  font-size: 8.5pt;
  color: #555;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nt-side-desc {
  font-size: 8.5pt;
  color: #555;
  line-height: 1.35;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nt-side-label {
  font-weight: 700;
  color: #333;
}
.nt-side-remarque {
  color: #777;
  font-style: italic;
}
.nt-side-empty-line {
  color: #aaa;
  font-style: italic;
}
/* Historique dépliable dans la carte du panneau */
.nt-side-histo-toggle {
  margin-top: 7px;
  font-size: 8.5pt;
  font-weight: 600;
  color: #3949ab;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.nt-side-histo-toggle:hover {
  text-decoration: underline;
}
.nt-side-histo-count {
  background: #3949ab;
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 2px;
}
.nt-side-histo {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e0e3ea;
}
.nt-side-histo .th-tabs {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0e3ea;
}
.nt-side-histo .th-tab {
  padding: 3px 9px;
  font-size: 8pt;
}
.nt-side-histo .th-timeline {
  padding-left: 16px;
}
.nt-side-histo .th-loading {
  font-size: 8.5pt;
  color: #888;
  padding: 6px 0;
}
.nt-side-histo .th-entry-text {
  font-size: 8.5pt;
}

/* --- Sections du formulaire --- */
.nt-section {
  margin-bottom: 6px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
}
/* Client + Contact côte à côte */
.nt-section-client {
  flex: 3;
}
.nt-section-contact {
  flex: 2;
}
.nt-section-title {
  background: #f8f9fa;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 10pt;
  color: #444;
  border-bottom: 1px solid #e8eaed;
  text-align: left;
}
.nt-section-title .fa {
  color: var(--main-bg-color);
  margin-right: 6px;
  width: 16px;
  text-align: center;
}
.nt-section-body {
  padding: 8px 14px;
}

/* --- Champs --- */
.model-new-ticket .nt-field {
  margin-bottom: 8px;
}
.model-new-ticket .nt-field:last-child {
  margin-bottom: 0;
}
.model-new-ticket .nt-field > label {
  display: block;
  font-size: 9pt;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* --- Grille 2-3 colonnes --- */
.nt-row-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.nt-row-grid:last-child {
  margin-bottom: 0;
}
.nt-row-grid > .nt-field {
  flex: 1;
  margin-bottom: 0;
}
.nt-field .multiselect {
  display: block;
}
.nt-row-grid .multiselect {
  display: block;
}
/* --- Inputs et textareas --- */
.model-new-ticket input[type="text"],
.model-new-ticket input[type="email"],
.model-new-ticket input:not([type]),
.model-new-ticket textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 10pt;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-sizing: border-box;
}
.model-new-ticket input:focus,
.model-new-ticket textarea:focus {
  border-color: var(--main-bg-color);
  box-shadow: 0 0 0 3px rgba(38, 154, 142, 0.12);
}
.model-new-ticket textarea {
  resize: vertical;
  min-height: 50px;
}

/* --- Checkboxes --- */
.model-new-ticket input[type="checkbox"] {
  accent-color: var(--main-bg-color);
  margin-right: 4px;
}
.nt-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 8px 14px;
}
.nt-checkbox-item {
  display: inline-flex !important;
  align-items: center;
  font-weight: normal !important;
  text-transform: none !important;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.nt-checkbox-item:hover {
  background: #f0f0f0;
}

/* --- Textes pré-remplis (popup au survol) --- */
.nt-pretext-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: 8px;
  color: var(--main-bg-color);
  font-size: 10pt;
}
.nt-pretext-toggle:hover > .fa {
  color: #1b6e64;
}
.nt-pretext-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 10px 14px;
  min-width: 350px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 9.5pt;
  font-weight: normal;
  text-transform: none;
}
.nt-pretext-toggle:hover > .nt-pretext-popup {
  display: block;
}
.nt-pretext-popup ul {
  margin: 2px 0;
  text-align: left;
}

/* --- Bouton ajouter contact --- */
.nt-add-contact {
  cursor: pointer;
  color: var(--main-bg-color);
  margin-left: 6px;
  font-size: 12pt;
  transition: color 0.2s ease;
}
.nt-add-contact:hover {
  color: #1b6e64;
}

/* --- Boutons d'action (Enregistrer / Annuler) --- */
.nt-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 4px;
}
.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 10.5pt;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nt-btn-validate {
  background-color: var(--main-bg-color) !important;
  color: white !important;
}
.nt-btn-validate:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(38, 154, 142, 0.3);
}
.nt-btn-validate:disabled {
  background-color: #ccc !important;
  color: #888 !important;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}
.nt-btn-cancel {
  background-color: #f5f5f5 !important;
  color: #666 !important;
}
.nt-btn-cancel:hover {
  background-color: #ffebee !important;
  color: #c62828 !important;
}

/* --- Liste utilisateurs (sous-modale "Vous êtes ?") --- */
/* --- Liste utilisateurs (nouvelle entrée - colonne) --- */
.nt-user-item {
  margin-bottom: 4px;
}
.nt-user-item button {
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5pt;
}
.nt-user-item button:hover {
  background: #f0faf8;
  border-color: var(--main-bg-color);
}
.nt-user-item button .fa {
  color: var(--main-bg-color);
}

/* --- Grille utilisateurs (modales - en ligne) --- */
.user-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.user-chip button {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid #e0e0e0;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10pt;
  white-space: nowrap;
}

/* Thème "Assigner" (bleu) */
.modal-h-assign {
  color: var(--main-button) !important;
  border-bottom: 2px solid var(--main-button) !important;
}
.modal-h-assign .fa {
  margin-right: 6px;
}
.user-chip-assign button {
  border-color: #bbdefb;
  color: #1565c0;
}
.user-chip-assign button .fa {
  color: #1565c0;
}
.user-chip-assign button:hover {
  background: #e3f2fd;
  border-color: #1565c0;
}

/* Sous-titre + bouton "Non assigné" distinct (popup d'assignation) */
.modal-assign-subtitle {
  text-align: center;
  font-size: 9.5pt;
  color: #777;
  margin-bottom: 12px;
}
.btn-unassign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px dashed #c0c4cc;
  background: #f4f5f7;
  color: #555;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-unassign .fa {
  color: #888;
}
.btn-unassign:hover {
  background: #ebedf0;
  border-color: #98a0ab;
  color: #333;
}
.modal-assign-divider {
  height: 1px;
  background: #e0e3ea;
  margin: 14px 0;
}

/* Thème "S'identifier" (vert) */
.modal-h-identify {
  color: #2e7d32 !important;
  border-bottom: 2px solid #2e7d32 !important;
}
.modal-h-identify .fa {
  margin-right: 6px;
}
.user-chip-identify button {
  border-color: #c8e6c9;
  color: #2e7d32;
}
.user-chip-identify button .fa {
  color: #2e7d32;
}
.user-chip-identify button:hover {
  background: #e8f5e9;
  border-color: #2e7d32;
}

/* --- Vue confirmation après création du ticket --- */
.text-new-ticket {
  width: 100%;
  text-align: center;
  background: #f8fffe;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e0f2f1;
  margin-top: 12px;
}
.text-new-ticket div {
  padding: 4px 0;
  font-size: 11pt;
}
.text-new-ticket .fa {
  color: var(--main-bg-color);
  margin-right: 6px;
}
.id-new-ticket-div {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 12px 0;
  background: white;
  border-radius: 12px;
  border: 2px solid var(--main-bg-color);
}
.id-new-ticket {
  font-size: 24pt;
  color: var(--main-bg-color);
}

/* --- Sélection tiers - onglets Liste/Nouveau --- */
.model-new-ticket .tab {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 10px;
}
.model-new-ticket .tab button {
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
}

/* Infos tiers sélectionné */
.model-new-ticket .description {
  font-size: 9.5pt;
  color: #666;
  line-height: 1.6;
}

/* Nouveau tiers - inputs */
.model-new-ticket input.newTier {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 10pt;
  box-sizing: border-box;
}
.model-new-ticket input.newTier:focus {
  border-color: var(--main-bg-color);
  box-shadow: 0 0 0 3px rgba(38, 154, 142, 0.12);
  outline: none;
}

/* Table dans sélection tiers */
.model-new-ticket table {
  border-collapse: collapse;
  margin-bottom: 8px;
}
.model-new-ticket table td {
  border: none;
  padding: 4px 10px;
}

/* ============================================
   PANNEAU DETAIL TICKET (id_ticket)
   ============================================ */

/* Fond du panneau */
.atelier_moitier_2 {
  width: 39%;
  height: calc(100vh - 122px);
  border: none;
  vertical-align: top;
  background: linear-gradient(180deg, #f5f6f8 0%, #ecedef 100%);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  border-left: 1px solid #ddd;
}

/* ============================================
   PLEIN ÉCRAN (URL ?idticket=ID&fullscreen=1)
   Affiche uniquement le détail du ticket en plein écran (desktop comme mobile).
   ============================================ */
body.atelier-fullscreen .header-atelier {
  display: none !important;
}
body.atelier-fullscreen #id_table_ticket {
  display: none !important;
}
body.atelier-fullscreen #id_ticket {
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100;
  background: #f5f6f8;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-left: none !important;
}
body.atelier-fullscreen .atelier_moitier_2 .vertical {
  height: 100vh;
}

/* Bandeau fixe du ticket (toolbar + titre) */
.ticket-detail-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 246, 248, 0.95);
  backdrop-filter: blur(4px);
}

/* En-tête du ticket (barre sauvegarde + toolbar) */
.ticket-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
}

/* Toolbar d'actions dans le header */
.ticket-detail-toolbar {
  display: inline-flex;
  gap: 4px;
}
.ticket-detail-toolbar button {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #555;
  font-size: 13pt;
  border: 1px solid #e0e0e0;
}
.ticket-detail-toolbar button:hover {
  background-color: var(--main-bg-color);
  color: white;
  border-color: var(--main-bg-color);
}
.ticket-detail-toolbar a {
  text-decoration: none;
  display: inline-flex;
}

/* Actions droite du header (save + fermer) */
.ticket-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ticket-detail-actions .update {
  float: none;
  margin: 0;
}

/* Titre du ticket */
.atelier_moitier_2_title {
  margin: 8px 10px 10px 10px;
  font-size: 13pt;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--main-bg-color);
}
.atelier_moitier_2_title .ticket_tag {
  vertical-align: middle;
  margin-left: 6px;
}

/* === Layout unifié : lignes label/champ === */
.td-row {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  margin: 0 4px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  gap: 8px;
}
.td-label {
  flex: 0 0 100px;
  font-size: 9pt;
  font-weight: 600;
  color: #666;
  text-align: right;
  white-space: nowrap;
}
.td-field {
  flex: 1;
  min-width: 0;
}
.td-field textarea{
  width: 100%;
  box-sizing: border-box;
}
.td-field .multiselect {
  display: block;
}

/* Lignes pleine largeur (textarea, historique, rapport) */
.td-row-full {
  flex-direction: column;
  gap: 4px;
}
.td-row-full .td-label {
  flex: none;
  text-align: left;
  padding-top: 0;
}
.td-row-full .td-field {
  width: 100%;
}
.td-row-full .td-field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Lignes 3 colonnes (type/catégorie/sévérité, matériel) */
.td-row-inline-3 {
  display: flex;
  gap: 6px;
  padding: 5px 10px;
}
.td-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.td-cell .td-label {
  flex: none;
  text-align: left;
  font-size: 8.5pt;
  padding-top: 0;
}
.td-cell .td-field {
  width: 100%;
}
.td-cell .td-field .multiselect {
  display: block;
}

/* Toggle icônes (eye / eye-slash) dans labels */
.td-toggle {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 9pt;
  margin-left: 4px;
}
.td-toggle:hover {
  background-color: rgba(0,0,0,0.08);
}

/* Radio group (état en attente) */
.td-radio-group {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
}
.td-radio-item {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  font-size: 9pt;
  font-weight: normal !important;
  cursor: pointer;
  gap: 3px;
}

/* Checkboxes group (fournitures) */
.td-checkbox-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.td-checkbox-item {
  display: inline-flex !important;
  align-items: center;
  font-size: 9.5pt;
  font-weight: normal !important;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  width: auto !important;
  white-space: nowrap;
}
.td-checkbox-item:hover {
  background: #f0f0f0;
}

/* Inputs dans le panneau détail */
#id_ticket input[type="text"],
#id_ticket input[type="email"],
#id_ticket input[type="datetime-local"],
#id_ticket input:not([type="checkbox"]):not([type="radio"]):not([type="number"]) {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 10pt;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  background: white;
  width: 100%;
  box-sizing: border-box;
}
#id_ticket input:not([type="checkbox"]):not([type="radio"]):not([type="number"]):focus {
  border-color: var(--main-bg-color);
  box-shadow: 0 0 0 3px rgba(38, 154, 142, 0.12);
}

/* Checkboxes */
#id_ticket input[type="checkbox"] {
  accent-color: var(--main-bg-color);
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

/* Radio buttons */
#id_ticket input[type="radio"] {
  accent-color: var(--main-bg-color);
  margin-right: 2px;
}

/* Textareas */
#id_ticket textarea {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 10pt;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  background: white;
  resize: vertical;
}
#id_ticket textarea:focus {
  border-color: var(--main-bg-color);
  box-shadow: 0 0 0 3px rgba(38, 154, 142, 0.12);
}

/* Tags du ticket */
.ticket_tag {
  border-radius: 12px;
  vertical-align: middle;
  padding: 2px 8px;
  margin: 1px;
  display: inline-block;
  font-size: 8pt;
  font-weight: 500;
}

/* Barre verticale de sévérité */
.vertical {
  border-left: 4px solid black;
  height: calc(100vh - 122px);
  display: inline-block;
  position: fixed;
  border-radius: 2px;
}

/* Section Tiers - carte */
.td-tiers-card {
  display: flex;
  gap: 12px;
  background: white;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
}
.td-tiers-info {
  flex: 1;
  font-size: 9.5pt;
  line-height: 1.5;
}
.td-tiers-contact {
  border-left: 1px solid #e8e8e8;
  padding-left: 12px;
}
.td-contracts {
  margin-top: 6px;
  font-size: 9pt;
}
.td-contracts ul {
  list-style: none;
  padding-left: 10px;
  margin: 4px 0;
}
.td-tiers-note {
  white-space: pre-line;
  font-size: 9pt;
  color: #666;
  margin: 6px 0 0 0;
  padding: 6px;
  background: #fafafa;
  border-radius: 6px;
}

/* Icône ajout contact */
#id_ticket .fa-circle-plus {
  cursor: pointer;
  color: var(--main-bg-color);
  font-size: 12pt;
  transition: transform 0.2s ease;
}
#id_ticket .fa-circle-plus:hover {
  transform: scale(1.2);
}

/* === Section Historique (th-*) === */

/* En-tête spécifique historique */
.td-section-header-hist {
  background: linear-gradient(135deg, #e8eaf6 0%, #e1e4ed 100%) !important;
  border-color: #c5cae9 !important;
}
.td-section-header-hist:hover {
  background: linear-gradient(135deg, #dde0f2 0%, #d1d5e8 100%) !important;
}
.td-section-header-hist .td-section-icon {
  color: #3949ab;
}

/* Badge compteur */
.th-count {
  background: #3949ab;
  color: white;
  font-size: 8pt;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* Corps de l'historique */
.th-body {
  margin: 0 4px;
  border: 1px solid #c5cae9;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fafafe;
  padding: 10px 14px;
}

/* Onglets de filtre */
.th-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8eaed;
}
.th-tab {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 8.5pt;
  font-weight: 500;
  cursor: pointer;
  background: #eef0f4;
  color: #555;
  transition: all 0.15s ease;
}
.th-tab:hover {
  background: #dde0e8;
}
.th-tab-active {
  background: #3949ab !important;
  color: white !important;
  font-weight: 600;
}

/* Timeline */
.th-timeline {
  position: relative;
  padding-left: 18px;
}
.th-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d0d4e2;
  border-radius: 1px;
}

/* Entrée historique */
.th-entry {
  position: relative;
  margin-bottom: 8px;
}
.th-entry:last-child {
  margin-bottom: 0;
}

/* Point sur la timeline */
.th-entry-dot {
  position: absolute;
  left: -15px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #7986cb;
  background: white;
}
.th-entry-system .th-entry-dot {
  border-color: #bbb;
  width: 8px;
  height: 8px;
  top: 9px;
  left: -14px;
}
.th-entry-user .th-entry-dot {
  border-color: #3949ab;
  background: #3949ab;
}

/* Contenu */
.th-entry-content {
  background: white;
  border: 1px solid #e0e3ea;
  border-radius: 6px;
  padding: 8px 12px;
  transition: box-shadow 0.15s ease;
}
.th-entry-content:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.th-entry-system .th-entry-content {
  background: #f8f8fa;
  border-color: #eee;
}

/* Header de l'entrée */
.th-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.th-entry-date {
  font-size: 8pt;
  color: #999;
  font-style: italic;
  white-space: nowrap;
}
.th-entry-author {
  font-size: 8.5pt;
  font-weight: 600;
  color: #444;
}
.th-entry-tab {
  font-size: 7.5pt;
  background: #eef0f4;
  color: #777;
  padding: 1px 8px;
  border-radius: 8px;
  margin-left: auto;
}
.th-entry-system .th-entry-tab {
  background: #f0f0f0;
  color: #aaa;
}

/* Texte du message */
.th-entry-text {
  font-size: 9.5pt;
  color: #333;
  line-height: 1.5;
  word-break: break-word;
}
.th-entry-system .th-entry-text {
  font-size: 8.5pt;
  color: #888;
}
/* URL d'un rapport rendue cliquable (th_lierUrls) : une adresse longue ne doit pas
   déborder du panneau */
.th-entry-text a.th-lien-url,
.th-modal-apercu a.th-lien-url {
  word-break: break-all;
  text-decoration: underline;
}

/* Chargement */
.th-loading {
  text-align: center;
  padding: 10px;
  color: #999;
  font-size: 9pt;
}

/* ===== CORRECTION DE L'HISTORIQUE (clic droit : modifier / supprimer / restaurer) ===== */
.th-entry-corrigeable .th-entry-content { cursor: context-menu; }
.th-entry-badge {
  font-size: 7.5pt;
  background: #fff4e0;
  color: #b26a00;
  border: 1px solid #ffd699;
  padding: 0 7px;
  border-radius: 8px;
  cursor: help;
}
.th-entry-badge .fa { font-size: 7pt; }
.th-entry-badge-supprime {
  background: #fdecea;
  color: #c62828;
  border-color: #f5c2bd;
}
/* Mode caché (double-clic sur « Tout ») */
.th-tab.th-tab-corrections { background: #b26a00 !important; color: #fff !important; }
.th-corrections-bandeau {
  font-size: 8.5pt;
  color: #8a5200;
  background: #fff8ec;
  border: 1px dashed #f0c27a;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 0 0 10px 0;
  text-align: left;
}
.th-entry-supprime .th-entry-content { opacity: 0.6; border-style: dashed; }
.th-entry-supprime .th-entry-text { text-decoration: line-through; }
.th-entry-origine {
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 3px solid #f0c27a;
  background: #fffaf2;
  font-size: 8.5pt;
  color: #777;
  word-break: break-word;
}
.th-entry-origine-label {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #b26a00;
  margin-bottom: 2px;
}
/* Modale de correction */
.th-modal-apercu {
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  background: #f8f9fb;
  font-size: 9pt;
  color: #444;
  word-break: break-word;
}
.tlm-btn-primary.th-btn-danger { background: #c62828 !important; }

#id_ticket hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 6px 0;
}

/* === Section Facturation === */

/* En-tête cliquable */
.td-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 4px 4px 0;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  border: 1px solid #ffe0b2;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.td-section-header:hover {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}
.td-section-icon {
  font-size: 12pt;
  color: #e65100;
  width: 20px;
  text-align: center;
}
.td-section-title {
  font-weight: 700;
  font-size: 10pt;
  color: #444;
}
.td-section-summary {
  flex: 1;
  text-align: right;
  font-weight: 600;
  font-size: 10pt;
  color: #e65100;
}
.td-section-summary small {
  font-weight: 400;
  color: #999;
  font-size: 8.5pt;
}
.td-section-chevron {
  font-size: 9pt;
  color: #aaa;
  transition: transform 0.2s ease;
}

/* Vue résumée (fermée) */
.td-fact-summary {
  margin: 0 4px;
  padding: 6px 14px;
  background: #fffdf5;
  border: 1px solid #ffe0b2;
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.td-fact-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 9.5pt;
}
.td-fact-summary-item:not(:last-child) {
  border-bottom: 1px solid #fff0d0;
}
.td-fact-summary-item a {
  color: var(--main-button);
  text-decoration: none;
  font-weight: 600;
}
.td-fact-summary-item a:hover {
  text-decoration: underline;
}
.td-fact-summary-price {
  margin-left: auto;
  font-weight: 600;
  color: #555;
  font-size: 9pt;
}

/* Icônes type document */
.td-fact-icon {
  font-size: 11pt;
  width: 18px;
  text-align: center;
}
.td-fact-icon-propal { color: #1565c0; }
.td-fact-icon-order { color: #e65100; }
.td-fact-icon-invoice { color: #2e7d32; }

/* Vue détaillée (ouverte) */
.td-fact-open {
  margin: 0 4px;
  border: 1px solid #ffe0b2;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fffdf5;
}
/* Anciens styles td-htab supprimés — remplacés par th-tab */

/* Facturation - items */
.td-field ul {
  list-style: none;
  padding-left: 0;
  margin: 4px 0;
}
.td-field ul li {
  padding: 4px 8px;
  margin: 3px 0;
  background: white;
  border-radius: 6px;
  border: 1px solid #eee;
  font-size: 9.5pt;
}

/* Onglets rapport */
#id_ticket .tabs_ul {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 -1px 0;
  padding: 0;
  list-style-type: none;
}
#id_ticket .tabs {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-bottom: none;
  background: #f9f9f9;
}
#id_ticket .tabs.tabSelected {
  background: white;
  border-bottom: 2px solid white;
  font-weight: bold;
}
#id_ticket .tabs a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 9pt;
  white-space: nowrap;
}

/* Textarea du rapport */
#id_ticket .td-field > span > textarea {
  border-top-left-radius: 0;
  border: 1px solid #ddd;
}

/* Barre de statuts sous le rapport */
.td-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* Bouton Clôturer */
.btn-cloturer {
  background-color: #43a047 !important;
  color: white !important;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  margin-left: 10px;
}
.btn-cloturer:hover {
  background-color: #2e7d32 !important;
}

td {
  padding: 10px;
  border: 1px solid rgba(224,224,224,0.5);
}

/* td.filter remplacé par .tl-toolbar */

label {
  vertical-align: middle;
  width: 30%;
  display: inline-block;
  margin: 1%;
  font-weight: bold;
}
.label_line {
  width: auto;
}

/* .ticket_tag est défini dans la section PANNEAU DETAIL TICKET */

.column-2 {
  width: 65%;
  vertical-align: middle;
  display: inline-block;
}

.full {
  width: 100%;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/* Clignotement doux rouge pour rappels expirés (lignes du tableau) */
.tl-recall-blink {
  animation: recallBlink 2s ease-in-out infinite;
}

@keyframes recallBlink {
  0%, 100% { background-color: inherit; }
  50% { background-color: rgba(220, 50, 50, 0.15); }
}

/* Clignotement doux rouge pour boutons type-tab */
.tl-type-tab.tl-recall-blink {
  animation: recallBlinkBtn 2s ease-in-out infinite;
}
.tl-type-tab.tl-type-tab-active.tl-recall-blink {
  animation: recallBlinkBtnActive 2s ease-in-out infinite;
}
@keyframes recallBlinkBtn {
  0%, 100% { box-shadow: none; border-color: #ddd; }
  50% { box-shadow: inset 0 0 0 50px rgba(220, 50, 50, 0.15); border-color: rgba(220, 50, 50, 0.5); }
}
@keyframes recallBlinkBtnActive {
  0%, 100% { background: var(--main-bg-color); }
  50% { background: rgba(220, 50, 50, 0.6); border-color: rgba(220, 50, 50, 0.8); }
}

.color-pulse-date {
  color: black;
  animation-name: color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes color {
  0% {
    color: black;
  }
  50% {
    color: red;
  }
  100% {
    color: black;
  }
}

/* === Boutons Assistant IA === */
.btn-ai-group {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  margin-left: 6px;
}
.btn-ai-assist {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ai-rapport {
  background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
}
.btn-ai-mail {
  background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
}
.btn-ai-assist:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}
.btn-ai-rapport:hover {
  background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%) !important;
  box-shadow: 0 3px 10px rgba(67, 160, 71, 0.4);
}
.btn-ai-mail:hover {
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%) !important;
  box-shadow: 0 3px 10px rgba(30, 136, 229, 0.4);
}
/* === FRISE CLIENT (« Historique client », frise de vie du client) — préfixe fc- === */
/* En-tête cliquable au-dessus de l'Historique : même style que .td-section-header-hist, couleur frise */
.td-section-header-frise {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
  border-color: #ffb74d !important;
  border-radius: 8px;
  margin-bottom: 6px;
}
.td-section-header-frise:hover {
  background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%) !important;
}
.td-section-header-frise .td-section-icon { color: #e65100; }
.td-section-header-frise .td-section-chevron { margin-left: auto; color: #e65100; }
.fc-count {
  background: #fb8c00;
  color: white;
  font-size: 8pt;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.fc-count-busy { background: #9e9e9e; }
.fc-busy { background: #fff3e0; border-left: 3px solid #fb8c00; padding: 6px 10px; border-radius: 4px; font-size: 9pt; margin-bottom: 8px; color: #8d4a00; }
.fc-loading-sub { margin-top: 8px; font-size: 9pt; color: #888; }

.fc-modal { max-width: 900px; }
.fc-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-right: 40px; }
/* Croix en haut à droite (la croix du bas est hors de vue quand la frise est longue) */
.fc-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #f0f0f0; color: #555; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fc-close:hover { background: #e0e0e0; color: #222; }
.fc-client { font-size: 10pt; font-weight: 400; color: #555; }
.fc-body { max-height: 75vh; overflow-y: auto; text-align: left; }
.fc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 8.5pt; color: #777; margin-bottom: 8px; }
.fc-badge { padding: 1px 8px; border-radius: 10px; font-size: 8pt; font-weight: 600; color: #fff; }
.fc-badge-brut { background: #9e9e9e; }
.fc-badge-stale { background: #fb8c00; }
.fc-warning { background: #fff8e1; border-left: 3px solid #ffb300; padding: 6px 10px; border-radius: 4px; font-size: 9pt; margin-bottom: 8px; }
.fc-error { background: #ffebee; border-left: 3px solid #e53935; padding: 8px 10px; border-radius: 4px; font-size: 9.5pt; }
.fc-loading { padding: 30px 10px; text-align: center; color: #666; font-size: 10pt; }
.fc-empty { padding: 20px; text-align: center; color: #888; }
.fc-resume { background: #f5f7fb; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 10pt; line-height: 1.45; color: #333; }

.fc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 14px; cursor: pointer; font-size: 8.5pt;
  border: 1px solid var(--fc-color); background: var(--fc-color); color: #fff;
}
.fc-chip-count { background: rgba(255,255,255,0.3); border-radius: 8px; padding: 0 5px; font-size: 7.5pt; }
.fc-chip-off { background: #fff; color: var(--fc-color); opacity: 0.6; }

.fc-year { margin-bottom: 6px; }
.fc-year-label { display: inline-block; font-weight: 700; font-size: 10pt; color: #fff; background: var(--main-bg-color, #555); border-radius: 12px; padding: 2px 12px; margin: 6px 0 4px; }
.fc-timeline { list-style: none; margin: 0 0 0 14px; padding: 0 0 0 18px; border-left: 2px solid #ddd; }
.fc-event { position: relative; padding: 6px 0 6px 18px; }
.fc-dot {
  position: absolute; left: -32px; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fc-color); color: #fff; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff;
}
.fc-card { background: #fff; border: 1px solid #eee; border-left: 3px solid var(--fc-color); border-radius: 6px; padding: 6px 10px; }
.fc-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fc-date { font-size: 8.5pt; color: #888; white-space: nowrap; }
.fc-titre { font-size: 10pt; color: #222; text-decoration: none; flex: 1 1 auto; }
a.fc-titre:hover { text-decoration: underline; color: var(--fc-color); }
.fc-montant { font-size: 8.5pt; color: #666; white-space: nowrap; }
.fc-detail { font-size: 9pt; color: #444; margin-top: 3px; line-height: 1.4; }
.fc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fc-tag { font-size: 7.5pt; background: #f0f0f0; color: #555; border-radius: 4px; padding: 1px 6px; }
.fc-tag-poste { background: #e3f2fd; color: #1565c0; }
.fc-tag-ref { background: #fafafa; color: #888; }
/* Importance : 3 = majeur (titre gras, pastille plus grande), 1 = mineur (atténué) */
.fc-imp-3 .fc-titre { font-weight: 700; }
.fc-imp-3 .fc-dot { width: 30px; height: 30px; left: -34px; font-size: 13px; }
.fc-imp-2 .fc-titre { font-weight: 600; }
.fc-imp-1 .fc-card { opacity: 0.85; }
.fc-imp-1 .fc-titre { font-size: 9.5pt; }

@media (max-width: 768px) {
  .fc-modal { width: 100%; max-width: 100%; }
  .fc-body { max-height: 80vh; }
  .fc-timeline { margin-left: 10px; padding-left: 14px; }
  .fc-event { padding-left: 14px; }
  .fc-dot { left: -27px; width: 22px; height: 22px; font-size: 10px; }
  .fc-imp-3 .fc-dot { left: -29px; width: 26px; height: 26px; }
}

.btn-ai-rapport-tab {
  cursor: pointer;
  color: #43a047;
  margin-left: 6px;
  font-size: 10pt;
  transition: color 0.2s ease;
}
.btn-ai-rapport-tab:hover {
  color: #2e7d32;
}

/* === Modal IA === */
.ai-loading {
  text-align: center;
  padding: 40px 20px;
  font-size: 12pt;
  color: #666;
}
.ai-response-body {
  max-height: 60vh;
  overflow-y: auto;
}
.ai-response-text {
  font-family: inherit;
  font-size: 10pt;
  line-height: 1.6;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin: 0;
}
.ai-response-text h1,
.ai-response-text h2,
.ai-response-text h3 {
  margin-top: 12px;
  margin-bottom: 6px;
  color: #333;
}
.ai-response-text h1 { font-size: 14pt; }
.ai-response-text h2 { font-size: 12pt; }
.ai-response-text h3 { font-size: 11pt; }
.ai-response-text ul, .ai-response-text ol {
  padding-left: 20px;
  margin: 6px 0;
}
.ai-response-text li {
  margin-bottom: 4px;
}
.ai-response-text code {
  background: #e9ecef;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9pt;
}
.ai-response-text pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 9pt;
}
.ai-response-text pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.ai-response-text p {
  margin: 6px 0;
}
.ai-response-text strong {
  color: #222;
}

/* === Modal Mail IA === */
.ai-mail-field {
  margin-bottom: 12px;
}
.ai-mail-field label {
  display: block;
  font-size: 9pt;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}
.ai-mail-textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  font-family: inherit;
  font-size: 10pt;
  resize: vertical;
  box-sizing: border-box;
}
.ai-mail-textarea:focus {
  outline: none;
  border-color: #1e88e5;
  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.15);
}
.ai-mail-textarea-result {
  min-height: 200px;
  background: #f8f9fa;
}
.ai-mail-input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 10pt;
  box-sizing: border-box;
}
.ai-mail-input:focus {
  outline: none;
  border-color: #1e88e5;
  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.15);
}
.ai-mail-result {
  max-height: 60vh;
  overflow-y: auto;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
/* Panneau "tickets du tiers" : empilé sous la modale sur tablette/mobile */
@media (max-width: 992px) {
  .nt-modal-flex {
    flex-direction: column;
    align-items: center;
  }
  .nt-side-panel {
    width: 100%;
    max-width: 100%;
    transform: translateY(-12px);
    transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease, margin-top 0.25s ease;
    max-height: 0;
  }
  .nt-side-panel.nt-side-open {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    max-height: 50vh;
    transform: translateY(0);
  }
  .nt-side-inner {
    max-height: 50vh;
  }
}

@media (max-width: 768px) {
  /* Corriger le centrage global et remplir tout le viewport */
  html, body {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .page_atelier {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Header : empiler titre et actions */
  .header-atelier {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    justify-content: center;
  }
  .ha-title h1 {
    font-size: 12pt;
  }
  .ha-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Liste tickets en pleine largeur */
  #id_table_ticket {
    display: block !important;
    width: 100% !important;
    height: calc(100vh - 100px);
    box-sizing: border-box !important;
    position: relative;
  }
  /* G1 : la colonne « Âge du ticket » reste atteignable par défilement
     horizontal interne (overflow:auto hérité de .atelier_moitier_1) mais sans
     aucune affordance visuelle. Léger dégradé au bord droit pour signaler
     qu'il reste du contenu à faire glisser. */
  #id_table_ticket::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 14px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.12));
    pointer-events: none;
  }

  /* Panneau détail ticket : caché par défaut sur mobile */
  #id_ticket {
    display: none !important;
  }

  /* Quand un ticket est ouvert : détail en plein écran, liste cachée */
  body.mobile-ticket-open #id_ticket {
    display: block !important;
    width: 100% !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100;
    background: #f5f6f8;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-left: none !important;
  }
  body.mobile-ticket-open #id_table_ticket {
    display: none !important;
  }
  body.mobile-ticket-open .header-atelier {
    display: none !important;
  }

  /* Barre verticale de sévérité : ajuster pour pleine largeur */
  .atelier_moitier_2 .vertical {
    height: 100vh;
  }

  /* Sticky header du ticket */
  .ticket-detail-sticky {
    z-index: 101;
  }

  /* Cacher la toolbar sur mobile quand fermée */
  .tl-toolbar-mobile-hidden {
    display: none !important;
  }

  /* Bouton toggle toolbar mobile */
  .tl-toolbar-mobile-toggle {
    display: flex;
    justify-content: center;
    padding: 4px 8px;
    background: #f8f9fb;
    border-bottom: 1px solid #e0e3e8;
  }
  .tl-toolbar-mobile-toggle button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 10pt;
    background: #e8eaef;
    border-radius: 6px;
    cursor: pointer;
  }

  /* Toolbar : adapter pour mobile */
  .tl-toolbar-row {
    padding: 4px 8px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .tl-toolbar-center {
    justify-content: flex-start;
    gap: 2px 8px;
    flex-wrap: wrap;
  }

  /* Cacher la colonne état sur petits écrans */
  .tl-th-status,
  .tl-status {
    display: none;
  }

  /* Panneaux : pleine largeur sur mobile */
  .atelier_moitier_1 {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .atelier_moitier_2 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Réduire la taille de police du tableau */
  .atelier_moitier_1 table {
    font-size: 8pt;
  }

  /* Ticket detail : sections plus compactes */
  .ticket-detail-header {
    padding: 6px 8px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  /* G2 : la rangée d'icônes de la toolbar (tickets du tiers, lectures,
     impression, mail, QualiRépar, NetSight...) dépassait de 43px le panneau
     #id_ticket (overflow-x:hidden !important plus haut) faute de retour à la
     ligne. */
  .ticket-detail-toolbar {
    flex-wrap: wrap;
  }
  /* G2 (cause réelle, mesurée) : les 3 cellules de .td-row-inline-3
     (type/catégorie/sévérité, matériel) sont flex:1 SANS min-width:0 — leur
     largeur minimale par défaut (auto) est celle du select/multiselect
     qu'elles contiennent, ce qui poussait la ligne à 418px et rognait 43px
     du panneau malgré overflow-x:hidden. */
  .td-cell {
    min-width: 0;
  }
  /* Même cause que .td-cell : .td-tiers-info est flex:1 sans min-width:0 dans
     .td-tiers-card (carte Tiers), donc ne pouvait pas céder de la place à
     .td-tiers-contact (sélecteur de contact + icône d'ajout). */
  .td-tiers-info {
    min-width: 0;
  }
  .atelier_moitier_2_title {
    font-size: 11pt;
    padding: 6px 10px;
  }

  /* Modals : plein écran sur mobile */
  .modal-container {
    width: 95% !important;
    max-height: 90vh;
    padding: 12px 14px !important;
  }
  .modal-container-large {
    width: 95% !important;
  }
  .modal-container-full {
    width: 98% !important;
    height: 95vh !important;
  }

  /* Modal nouvelle entrée : grilles en colonnes */
  .nt-row-grid {
    flex-direction: column;
    gap: 6px;
  }
  .nt-section-body {
    padding: 6px 10px;
  }
  .model-new-ticket .nt-field > label {
    font-size: 8pt;
  }
  .nt-checkbox-group {
    flex-wrap: wrap;
  }
  .nt-checkbox-item {
    font-size: 9pt;
  }
  .model-new-ticket h3 {
    font-size: 12pt;
  }
  .model-new-ticket table {
    width: 100%;
  }
  .model-new-ticket table td {
    padding: 4px 0;
    display: block;
    width: 100%;
  }
  .model-new-ticket .inline,
  .model-new-ticket .inline.newTier {
    display: block !important;
    width: 100%;
  }
  .model-new-ticket .multiselect {
    width: 100% !important;
  }
  .nt-actions {
    flex-direction: column;
    gap: 6px;
  }
  .nt-actions .nt-btn {
    width: 100%;
  }
}

/* ============================================================
   LIAISON DE TICKETS
   ============================================================ */

/* Icône dans la liste : état agrégé des tickets liés */
.tl-icon-link-done {
  color: #2e9e4f;
}
.tl-icon-link-open {
  color: #e8930c;
}

/* Section "Tickets liés" du détail */
.td-link-add {
  color: var(--main-bg-color);
  cursor: pointer;
}
.td-links-empty {
  color: #999;
  font-style: italic;
  font-size: 9pt;
}
.td-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-link-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  background: #f6f7f9;
  border: 1px solid #e2e5ea;
  border-radius: 6px;
  font-size: 9pt;
}
.td-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.td-link-desc {
  margin-left: 20px;
  font-size: 8pt;
  color: #778;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-link-rel {
  color: #888;
  width: 14px;
  text-align: center;
}
.td-link-rel-principal {
  color: #6b4fbb;
}
.td-link-id {
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.td-link-tag {
  font-size: 7.5pt;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.td-link-tag-principal {
  background: #ede7fb;
  color: #6b4fbb;
}
.td-link-tag-secondaire {
  background: #e7eefb;
  color: #3a68b8;
}
.td-link-subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-link-statut {
  font-size: 7.5pt;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.td-link-statut-done {
  background: #e2f4e8;
  color: #2e9e4f;
}
.td-link-statut-wait {
  background: #fdf1de;
  color: #b8860b;
}
.td-link-statut-open {
  background: #e8eaef;
  color: #555;
}
.td-link-dolibarr {
  color: #999;
  font-size: 8pt;
}
.td-link-dolibarr:hover {
  color: var(--main-bg-color);
}
.td-link-remove {
  color: #bbb;
  cursor: pointer;
}
.td-link-remove:hover {
  color: #d33;
}

/* Modale "Lier un ticket" */
.modal-container-link-ticket {
  width: 540px;
  max-width: 95%;
}

/* Modale "Résumé NetSight" (détail de ticket) : composant <netsight-resume compact>, cf. css/netsight.css .nsr-* */
.modal-container-netsight {
  width: 720px;
  max-width: 95%;
}
/* Bouton « Résumé NetSight » du ticket : avertissement si le contrat du client n'est pas OK
   (sur/sous-effectif, postes sans contrat — cf. netsightContractIssues). */
.ticket-detail-toolbar button.ticket-netsight-btn { position: relative; }
.ticket-detail-toolbar button.ticket-netsight-btn-warn {
  background-color: #fdf3e3;
  border-color: #e67e22;
  color: #e67e22;
}
/* Triangle dans le coin du bouton (à l'intérieur : jamais coupé par la barre d'outils) */
.ticket-netsight-warn {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 9px;
  line-height: 1;
  color: #c0392b;
}
.ticket-detail-toolbar button.ticket-netsight-btn-warn:hover .ticket-netsight-warn { color: #fff; }
/* Icône QualiRépar de la colonne « État » (bon rattaché au ticket) */
.tl-icon-qualirepar { color: #2e7d32; }

/* Menu clic droit d'une ligne de ticket (actions de la barre d'outils du détail) */
.tl-ctx-menu {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
  text-align: left;
  animation: navDropdownFadeIn 0.12s ease-out;
}
.tl-ctx-title { font-size: 8.5pt; font-weight: 600; color: #777; padding: 4px 10px 6px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.tl-ctx-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: none; border: none; border-radius: 6px;
  padding: 7px 10px;
  font-size: 9.5pt; color: #333; text-align: left; cursor: pointer;
}
.tl-ctx-menu button:hover { background: #f0f4f8; }
.tl-ctx-menu button .fa, .tl-ctx-menu button .fa-regular { width: 16px; text-align: center; color: var(--main-bg-color); }

/* Lien « QualiRépar » du ticket : bouton VERT PLEIN (icône blanche) quand un bon est rattaché
   au ticket — la variante pâle initiale ne se distinguait pas assez des autres boutons. */
.ticket-detail-toolbar button.ticket-qualirepar-btn-on {
  background-color: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
}
.ticket-detail-toolbar button.ticket-qualirepar-btn-on:hover {
  background-color: #1b5e20;
  border-color: #1b5e20;
  color: #fff;
}
.tlm-section-title {
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #778;
  margin: 16px 0 6px 0;
}
.modal-container-link-ticket .tlm-section-title:first-child {
  margin-top: 4px;
}

/* Cartes "type de lien" */
.tlm-relation {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tlm-rel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1.5px solid #e2e5ea;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tlm-rel-card:hover {
  border-color: #c5cbd6;
  background: #f8f9fb;
}
.tlm-rel-selected,
.tlm-rel-selected:hover {
  border-color: var(--main-bg-color);
  background: #f2f6fb;
  background: color-mix(in srgb, var(--main-bg-color) 7%, #fff);
}
.tlm-rel-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef0f4;
  color: #667;
  font-size: 12px;
  flex-shrink: 0;
}
.tlm-rel-selected .tlm-rel-icon {
  background: var(--main-bg-color);
  color: #fff;
}
.tlm-rel-texts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tlm-rel-title {
  font-size: 9.5pt;
  font-weight: 600;
  color: #223;
}
.tlm-rel-hint {
  font-size: 8pt;
  color: #889;
}
.tlm-rel-check {
  color: var(--main-bg-color);
  font-size: 14px;
  visibility: hidden;
}
.tlm-rel-selected .tlm-rel-check {
  visibility: visible;
}

/* Liste des tickets du tiers */
.tlm-loading,
.tlm-empty {
  color: #999;
  font-style: italic;
  font-size: 9pt;
  padding: 8px 4px;
}
.tlm-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
}
.tlm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid #e2e5ea;
  border-radius: 10px;
  font-size: 9pt;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tlm-item:hover {
  border-color: #c5cbd6;
  background: #f8f9fb;
}
.tlm-item-selected,
.tlm-item-selected:hover {
  border-color: var(--main-bg-color);
  background: #f2f6fb;
  background: color-mix(in srgb, var(--main-bg-color) 7%, #fff);
}
.tlm-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tlm-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tlm-item-row .td-link-statut {
  margin-left: auto;
}
.tlm-item-id {
  font-weight: 700;
  color: #223;
  white-space: nowrap;
}
.tlm-item-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 7.5pt;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  background: #eef0f4;
  color: #556;
  white-space: nowrap;
  flex-shrink: 0;
}
.tlm-item-desc {
  font-size: 8.5pt;
  color: #445;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tlm-item-check {
  color: var(--main-bg-color);
  font-size: 14px;
  visibility: hidden;
  flex-shrink: 0;
}
.tlm-item-selected .tlm-item-check {
  visibility: visible;
}

/* Saisie manuelle d'un n° de ticket */
.tlm-manual-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  width: 180px;
  border: 1.5px solid #e2e5ea;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.tlm-manual-wrap:focus-within {
  border-color: var(--main-bg-color);
}
.tlm-manual-icon {
  padding: 0 4px 0 10px;
  color: #99a;
  font-size: 9pt;
}
.tlm-manual {
  flex: 1;
  min-width: 0;
  padding: 7px 10px 7px 4px;
  border: none !important;
  outline: none;
  font-size: 9.5pt;
}

/* Popup "informer les tickets liés" (changement d'état) */
.tln-intro {
  font-size: 9.5pt;
  color: #334;
  line-height: 1.5;
}
.tln-message {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1.5px solid #e2e5ea;
  border-radius: 10px;
  font-size: 9.5pt;
  resize: vertical;
}
.tln-message:focus {
  border-color: var(--main-bg-color);
  outline: none;
}

/* Liaison à la création (panneau latéral "Nouvelle entrée") */
.nt-side-link-bar {
  margin: 6px 10px 2px 10px;
  padding: 8px 10px;
  background: #f2f6fb;
  background: color-mix(in srgb, var(--main-bg-color) 7%, #fff);
  border: 1px solid var(--main-bg-color);
  border-radius: 8px;
}
.nt-side-link-info {
  font-size: 8.5pt;
  font-weight: 600;
  color: #334;
  margin-bottom: 6px;
}
.nt-side-link-info .fa-link {
  color: var(--main-bg-color);
}
.nt-side-link-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nt-side-link-mode {
  font-size: 7.5pt;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ccd2dc;
  color: #556;
  cursor: pointer;
  white-space: nowrap;
}
.nt-side-link-mode:hover {
  border-color: var(--main-bg-color);
}
.nt-side-link-mode-active {
  background: var(--main-bg-color);
  border-color: var(--main-bg-color);
  color: #fff;
}
.nt-side-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  background: #eef0f4 !important;
  color: #99a !important;
  border: 1px solid #dde0e6 !important;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 9px;
}
.nt-side-link-btn:hover {
  color: var(--main-bg-color) !important;
  border-color: var(--main-bg-color) !important;
}
.nt-side-link-btn-active {
  background: var(--main-bg-color) !important;
  border-color: var(--main-bg-color) !important;
  color: #fff !important;
}
.nt-side-card-linked {
  border-color: var(--main-bg-color) !important;
  box-shadow: 0 0 0 1px var(--main-bg-color);
}

/* Boutons d'action */
.tlm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.tlm-btn-cancel {
  background: #f0f1f4 !important;
  color: #445 !important;
  border: 1px solid #dde0e6 !important;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.tlm-btn-cancel:hover {
  background: #e4e6ec !important;
}
.tlm-btn-primary {
  background: var(--main-bg-color) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 20px;
  cursor: pointer;
}
.tlm-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}
.tlm-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   RENDEZ-VOUS DE TICKET (doc/PLAN_RDV_TICKET.md) — section du détail, modale,
   rendu dans l'historique, icône de la colonne État
   ========================================================================== */
.tl-icon-rdv { color: #1565c0; }
/* v3.32.1 : bleu = un RDV a venir, gris ardoise = des RDV tous passes (tickets_rdvClasse) */
.tl-icon-rdv.tl-icon-rdv-avenir { color: #1565c0; }
.tl-icon-rdv.tl-icon-rdv-passe { color: #607d8b; }

.td-rdv-add {
  color: var(--main-bg-color);
  cursor: pointer;
}
.td-rdvs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-rdv-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  background: #eef4fc;
  border: 1px solid #cfe0f5;
  border-radius: 6px;
  font-size: 9pt;
  text-align: left;
}
.td-rdv-passe {
  background: #f6f7f9;
  border-color: #e2e5ea;
  opacity: 0.8;
}
.td-rdv-annule {
  background: #f6f7f9;
  border-color: #e2e5ea;
  opacity: 0.7;
}
.td-rdv-annule .td-rdv-creneau { text-decoration: line-through; }
.td-rdv-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.td-rdv-icon { color: #1565c0; }
.td-rdv-creneau { font-weight: 600; color: #334; }
.td-rdv-tag {
  font-size: 7.5pt;
  padding: 1px 6px;
  border-radius: 8px;
  background: #e2e5ea;
  color: #556;
}
.td-rdv-tag-annule {
  background: #fdecea;
  color: #c62828;
  margin-left: 6px;
}
.td-rdv-action {
  color: #889;
  cursor: pointer;
  padding: 0 2px;
}
.td-rdv-row .td-rdv-action:first-of-type { margin-left: auto; }
.td-rdv-action:hover { color: var(--main-bg-color); }
.td-rdv-action-annuler:hover { color: #c62828; }
.td-rdv-titre {
  margin-left: 20px;
  font-size: 8.5pt;
  font-weight: 600;
  color: #445;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-rdv-detail {
  margin-left: 20px;
  font-size: 8.5pt;
  color: #556;
}
.td-rdv-detail .fa { width: 12px; color: #889; }
.td-rdv-note {
  margin-left: 20px;
  font-size: 8pt;
  color: #778;
  white-space: pre-line;
  word-break: break-word;
}
.td-rdv-toggle {
  font-size: 8.5pt;
  color: var(--main-bg-color);
  align-self: flex-start;
}

/* Modale « Planifier un rendez-vous » */
.modal-container-rdv {
  width: 560px;
  max-width: 95%;
}
.modal-container-rdv .tlm-section-title:first-of-type { margin-top: 4px; }
.rdv-form { text-align: left; }
.rdv-hint {
  font-size: 8pt;
  color: #889;
  margin-top: 4px;
}
.rdv-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rdv-champ {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rdv-champ-label {
  font-size: 8pt;
  color: #778;
}
.rdv-form input[type="date"],
.rdv-form input[type="time"],
.rdv-form input.rdv-lieu,
.rdv-form input.rdv-titre,
.rdv-form textarea.rdv-note {
  border: 1px solid #dde0e6;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10pt;
  box-sizing: border-box;
}
.rdv-form input.rdv-lieu,
.rdv-form input.rdv-titre { flex: 1; min-width: 220px; }
.rdv-form textarea.rdv-note { width: 100%; resize: vertical; }
.rdv-durees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.rdv-duree {
  font-size: 8.5pt;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #dde0e6;
  background: #f6f7f9;
  color: #556;
  cursor: pointer;
}
.rdv-duree:hover { border-color: var(--main-bg-color); }
.rdv-duree.rdv-duree-active {
  background: var(--main-bg-color);
  border-color: var(--main-bg-color);
  color: #fff;
}
.rdv-lien {
  font-size: 8.5pt;
  color: var(--main-bg-color);
  white-space: nowrap;
}
.rdv-conflits {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff4e5;
  border: 1px solid #ffd8a8;
  font-size: 8.5pt;
  color: #8a5300;
}
.rdv-conflits-titre { font-weight: 600; margin-bottom: 4px; }
.rdv-conflit { margin-left: 16px; }
.rdv-erreur {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  font-size: 9pt;
  color: #b71c1c;
}

/* ==========================================================================
   INTERVENTIONS ET SUIVI CONTRAT (doc/PLAN_PILOTAGE_CONTRATS.md) — section du détail,
   modale de création de fiche, fenêtre « facture 0 € » à la clôture. Réutilise les styles RDV.
   ========================================================================== */
.td-fi-item { background: #f1f8f1; border-color: #cfe5cf; }
.td-fi-icon { color: #2e7d32; }
.modal-container-fi { width: 640px; }
.fi-form .rdv-row { margin-top: 6px; }
.fi-sujet { font-size: 9.5pt; color: #556; margin-bottom: 4px; }
.fi-sujet .fa { color: #2e7d32; margin-right: 4px; }
.fi-select {
  border: 1px solid #dde0e6;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10pt;
  max-width: 320px;
}
.fi-lieu, .fi-durees { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fi-durees { margin: 4px 0 2px; }
/* Pastilles (durées rapides, lieu) : la règle .page_atelier button (0-1-1) est plus forte qu'une classe seule */
body.dm-page-atelier button.fi-chip {
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 9pt;
  background: #f0f2f5;
  color: #445;
  border: 1px solid #dde0e6;
}
body.dm-page-atelier button.fi-chip.fi-chip-actif {
  background: var(--main-bg-color);
  color: #fff;
  border-color: var(--main-bg-color);
  font-weight: 600;
}
.fi-form input.fi-duree {
  width: 70px;
  border: 1px solid #dde0e6;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 9pt;
  box-sizing: border-box;
}
.fi-form textarea.fi-resume {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dde0e6;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10pt;
  resize: vertical;
}
.fi-detail-toggle { display: inline-block; margin-top: 6px; }
.fi-rapports {
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  padding: 4px 6px;
  background: #fafbfc;
}
/* main.css : label en 30 % de large, gras — neutralisé pour les rapports à cocher */
.fi-rapports label.fi-rapport {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 5px 4px;
  font-weight: 400;
  font-size: 9pt;
  border-bottom: 1px solid #eef0f3;
  cursor: pointer;
}
.fi-rapports label.fi-rapport:last-child { border-bottom: none; }
.fi-rapports label.fi-rapport.fi-rapport-coche { background: #e8f5e9; }
.fi-rapport input[type="checkbox"] { margin-top: 2px; }
.fi-rapport-date { flex: 0 0 72px; color: #778; font-size: 8.5pt; }
.fi-rapport-texte { flex: 1; white-space: pre-line; color: #334; }
.modal-container-sc { width: 560px; max-width: 95%; }
.modal-container-sc .rdv-durees { margin-top: 4px; }
.modal-container-sc .rdv-row { margin-top: 4px; }
.modal-container-sc input.sc-qte {
  width: 90px;
  border: 1px solid #dde0e6;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10pt;
}

/* Rendez-vous dans l'historique */
.th-entry-rdv {
  font-size: 9pt;
  color: #334;
  line-height: 1.5;
  padding: 4px 8px;
  margin-top: 2px;
  background: #eef4fc;
  border-left: 3px solid #1565c0;
  border-radius: 4px;
}
.th-entry-rdv .fa { width: 14px; color: #1565c0; }
.th-entry-rdv-annule { border-left-color: #c62828; opacity: 0.75; }
.th-entry-rdv-note { white-space: pre-line; color: #667; font-size: 8.5pt; }

@media (max-width: 768px) {
  .rdv-row { flex-direction: column; align-items: stretch; }
  .rdv-form input.rdv-lieu,
  .rdv-form input.rdv-titre { min-width: 0; }
}

/* Rattachement d'un événement existant (v3.26.0) + lien vers l'événement Dolibarr */
.rdv-modes {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rdv-mode {
  font-size: 9pt;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid #dde0e6;
  background: #f6f7f9;
  color: #556;
  cursor: pointer;
}
.rdv-mode:hover { border-color: var(--main-bg-color); }
.rdv-mode.rdv-mode-actif {
  background: var(--main-bg-color);
  border-color: var(--main-bg-color);
  color: #fff;
}
.rdv-candidats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 340px;
  overflow-y: auto;
}
.rdv-candidat {
  padding: 6px 10px;
  border: 1px solid #dde0e6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 9pt;
  text-align: left;
}
.rdv-candidat:hover { border-color: var(--main-bg-color); }
.rdv-candidat.rdv-candidat-choisi {
  border-color: var(--main-bg-color);
  background: #eef4fc;
  box-shadow: 0 0 0 1px var(--main-bg-color);
}
.rdv-candidat-ligne {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rdv-candidat-coche { color: #c5c9d2; }
.rdv-candidat-choisi .rdv-candidat-coche { color: var(--main-bg-color); }
.rdv-candidat-creneau { font-weight: 600; color: #334; }
.rdv-candidat-lien {
  margin-left: auto;
  color: #889;
  text-decoration: none;
}
.rdv-candidat-lien:hover { color: var(--main-bg-color); }
.rdv-candidat-titre {
  margin-left: 20px;
  color: #445;
}
.rdv-candidats-vide {
  margin-top: 10px;
  color: #999;
  font-style: italic;
  font-size: 9pt;
}
.td-rdv-titre a {
  color: #334;
  text-decoration: none;
}
.td-rdv-titre a:hover { color: var(--main-bg-color); text-decoration: underline; }
.td-rdv-titre a .fa { font-size: 7pt; color: #889; }
.th-entry-rdv a.th-entry-rdv-lien {
  margin-left: 6px;
  font-size: 8pt;
  color: #889;
  text-decoration: none;
}
.th-entry-rdv a.th-entry-rdv-lien:hover { color: var(--main-bg-color); }

/* ============================================
   AUDIT MOBILE v3.38.5 — téléphone, vue web Android, tablette portrait
   (UNIQUEMENT sous @media : l'affichage PC ne change pas)
   ============================================ */
@media (max-width: 768px) {
  /* Liste : la colonne État n'était plus affichée sous 768 px — l'état du ticket et
     les icônes (lien, RDV, QualiRépar, client appelé, projet) disparaissaient sur
     téléphone et dans l'application Android. Retour en colonne étroite, icônes
     empilées ; les étiquettes texte restent masquées (trop larges). */
  .tl-th-status {
    display: table-cell;
    width: 30px;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 7pt;
    letter-spacing: 0;
  }
  .tl-status {
    display: table-cell;
    width: 30px;
    padding: 4px 2px !important;
    white-space: normal;
    text-align: center;
  }
  .tl-status .tl-icons {
    flex-direction: column;
    gap: 5px;
    font-size: 10pt;
  }
  .tl-status .tl-wait-text {
    display: block;
    margin-left: 0;
    font-size: 6.5pt;
  }
  .tl-status .tl-user {
    display: flex;
    justify-content: center;
    margin: 5px 0 0;
  }
  .tl-status .ticket_tag {
    display: none;
  }
  /* Avec la colonne État, le tableau dépassait l'écran (423 px pour 412, 385 pour 375) et
     la colonne Âge sortait à droite : cellules et intitulés d'en-tête plus serrés. */
  #id_table_ticket .tl-tiers, #id_table_ticket .tl-id, #id_table_ticket .tl-desc,
  #id_table_ticket .tl-th-tiers, #id_table_ticket .tl-th-id, #id_table_ticket .tl-th-desc {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  #id_table_ticket .tl-age, #id_table_ticket .tl-th-age {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  #id_table_ticket thead tr:last-child th {
    letter-spacing: 0 !important;
    font-size: 8pt !important;
  }
  /* Page sans défilement vertical : la liste avait « 100vh - 100 px » alors que la barre
     de navigation + l'en-tête font 150 px (plus si les boutons passent à la ligne, plus
     encore avec la barre d'adresse du navigateur, comprise dans 100vh) → toute la page
     défilait. La page devient une colonne de la hauteur de l'écran VISIBLE (dvh) et la
     liste prend la place restante, seule à défiler. */
  body.dm-page-atelier {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body.dm-page-atelier > * {
    flex-shrink: 0;
  }
  body.dm-page-atelier > #id_table_ticket {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  /* Description : 6 lignes au plus dans la liste (une description de supervision
     occupait plusieurs écrans) ; le texte complet reste dans le détail. */
  .tl-message {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Modale « Nouvelle entrée » : les sections empilées gardaient la largeur de leur
     contenu (align-items: flex-start) — cartes Client / Contact étroites et listes
     déroulantes réduites. Pleine largeur. */
  .nt-row-grid {
    align-items: stretch;
  }
  .nt-row-grid > .nt-section,
  .nt-row-grid > .nt-field {
    width: 100%;
    box-sizing: border-box;
  }
  /* Menu « Filtres affichés » : ancré à droite de son bouton, il sortait de l'écran
     (libellés et couleurs de sévérité coupés). Calé dans l'écran, défilement interne. */
  .tl-filter-dropdown {
    position: fixed;
    top: 110px;
    left: 8px;
    right: 8px;
    min-width: 0;
    max-height: calc(100vh - 130px);
    z-index: 250;
  }
  /* Modales : « width: 95% » + padding 14 px en content-box dépassaient l'écran de
     9 px (bouton de fermeture rogné, modale collée au bord gauche). */
  .modal-container {
    box-sizing: border-box;
  }
}

/* Tablette paysage TACTILE (993-1199 px) : même disposition que la tablette portrait
   pour la modale « Nouvelle entrée » (1000 px fixes + panneau latéral de 340 px : elle
   sortait de l'écran, bouton de fermeture coupé). Un PC à la souris n'est pas concerné. */
@media (min-width: 993px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {
  .nt-modal-flex {
    flex-direction: column;
    align-items: center;
  }
  .nt-modal-flex .model-new-ticket {
    width: calc(100vw - 32px);
    max-width: 1000px;
    box-sizing: border-box;
  }
  .nt-side-panel {
    width: 100%;
    max-width: calc(100vw - 32px);
    max-height: 0;
    transform: translateY(-12px);
    transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease, margin-top 0.25s ease;
  }
  .nt-side-panel.nt-side-open {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    max-height: 50vh;
    transform: translateY(0);
  }
  .nt-side-inner {
    max-height: 50vh;
  }
  /* Détail (panneau d'environ 400 px) : les cellules et la carte Tiers peuvent
     rétrécir — la liste Sévérité était coupée au bord droit. */
  .td-cell,
  .td-tiers-info {
    min-width: 0;
  }
}

/* Tablettes avec liste et détail côte à côte (769-992 px, ou 993-1199 px tactile) : les deux
   panneaux avaient « 100vh - 122 px » sous un en-tête de 124 px — la page défilait (plus
   encore avec la barre d'adresse, comprise dans 100vh). Hauteur de l'écran VISIBLE, page
   fixe. Un PC à la souris (≥ 993 px) n'est pas concerné. */
@media (min-width: 769px) and (max-width: 992px), (min-width: 993px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {
  body.dm-page-atelier {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body.dm-page-atelier > .atelier_moitier_1,
  body.dm-page-atelier > .atelier_moitier_2 {
    height: calc(100vh - 124px);
    height: calc(100dvh - 124px);
  }
}

/* Téléphone, ou panneau de détail étroit de la tablette paysage tactile. */
@media (max-width: 600px), (min-width: 993px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {
  /* Détail : Type / Catégorie / Sévérité (et Marque / Type de matériel) côte à côte
     étaient illisibles au téléphone (« Commande - Urgent - Pro » sur 4 lignes).
     Une ligne par champ, libellé à gauche comme les autres lignes du détail. */
  .td-row-inline-3 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .td-row-inline-3 > .td-cell {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .td-row-inline-3 > .td-cell > .td-label {
    flex: 0 0 100px;
    text-align: right;
    font-size: 9pt;
  }
  .td-row-inline-3 > .td-cell > .td-field {
    flex: 1;
    min-width: 0;
  }
}


/* ==========================================================================
   PIÈCES DU TICKET — devis / commande / facture (composant <ticket-pieces>,
   includes/vue.component.ticketPieces.php, doc/PLAN_FACTURATION_TICKET.md)
   ========================================================================== */
.td-pieces-reste { margin-left: 8px; color: #c62828; font-weight: 600; font-size: 9pt; }
.td-pieces-aucune { color: #999; font-weight: 400; font-size: 9pt; }
.td-fact-open { padding: 6px 8px 8px; }
.nt-pieces { margin: 8px 0; text-align: left; }
.tp { font-size: 9.5pt; text-align: left; }
.tp-chargement, .tp-vide { color: #889; font-size: 9pt; padding: 6px 4px; }
.tp-bandeau {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px; font-size: 9pt; margin: 4px 0;
}
.tp-bandeau-err { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }
.tp-bandeau-warn { background: #fff8e1; color: #8d6e00; border: 1px solid #ffe082; }

/* Une pièce = une carte ; couleur de la bordure gauche selon le type */
.tp-piece {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-left: 4px solid #999;
  border-radius: 8px;
  margin: 6px 0;
  overflow: hidden;
}
.tp-piece-propal { border-left-color: #1565c0; }
.tp-piece-commande { border-left-color: #e65100; }
.tp-piece-facture { border-left-color: #2e7d32; }
.tp-piece-nouvelle { border-left-color: var(--main-bg-color); border-style: dashed; }
.tp-piece-tete {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; cursor: pointer; background: #fafbfc;
}
.tp-piece-tete-fixe { cursor: default; }
.tp-piece-tete:hover { background: #f3f5f8; }
.tp-piece-icone { font-size: 11pt; }
.tp-piece-propal .tp-piece-icone { color: #1565c0; }
.tp-piece-commande .tp-piece-icone { color: #e65100; }
.tp-piece-facture .tp-piece-icone { color: #2e7d32; }
.tp-piece-type { font-weight: 600; color: #445; }
.tp-piece-ref { color: var(--main-button); font-weight: 700; text-decoration: none; }
.tp-piece-ref:hover { text-decoration: underline; }
.tp-piece-ref .fa { font-size: 7.5pt; opacity: 0.6; }
.tp-piece-total { margin-left: auto; font-weight: 700; color: #223; white-space: nowrap; }
.tp-piece-total small { font-weight: 400; color: #889; font-size: 8pt; }
.tp-piece-chevron { color: #aaa; font-size: 8.5pt; }
.tp-reste { color: #c62828; font-weight: 600; font-size: 8.5pt; }

/* Statut : pastille colorée partagée avec la vue résumée du détail */
.tp-statut {
  padding: 1px 8px; border-radius: 10px; font-size: 8pt; font-weight: 600;
  background: #eceff1; color: #455a64; white-space: nowrap;
}
.tp-statut-brouillon { background: #f1f3f4; color: #5f6368; }
.tp-statut-valide { background: #e3f2fd; color: #0d47a1; }
.tp-statut-signe, .tp-statut-paye, .tp-statut-livre { background: #e8f5e9; color: #1b5e20; }
.tp-statut-partiel, .tp-statut-encours, .tp-statut-facture { background: #fff3e0; color: #e65100; }
.tp-statut-refuse, .tp-statut-annule, .tp-statut-abandonne { background: #ffebee; color: #b71c1c; }

.tp-piece-corps { padding: 6px 10px 8px; border-top: 1px solid #eef0f3; }
.tp-piece-origine { font-size: 8pt; color: #889; margin-left: 4px; }

/* Lignes (main.css : table centrée, thead en couleur principale → surcharges) */
.tp-lignes { width: 100%; border-collapse: collapse; margin: 0 0 6px; font-size: 9pt; }
.tp-lignes thead th, .tp-lignes thead th a { background: #f6f7f9; color: #556; }
.tp-lignes thead th { padding: 4px 6px; text-align: left; font-size: 8pt; font-weight: 600; border-bottom: 1px solid #dde0e6; }
.tp-lignes td { padding: 4px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid #f0f2f5; }
.tp-lignes tbody tr:last-child td { border-bottom: none; }
.tp-lignes tfoot td { padding: 3px 6px; font-size: 9pt; color: #556; border-top: 1px solid #e3e6ec; }
.tp-lignes tfoot tr.tp-ttc td { font-weight: 700; color: #223; }
.tp-td-qte { width: 56px; white-space: nowrap; }
.tp-td-num { text-align: right !important; white-space: nowrap; }
.tp-td-total { font-weight: 600; }
.tp-td-libelle { width: auto; }
.tp-td-action { width: 24px; text-align: center !important; }
.tp-ligne-titre td { font-weight: 700; color: #445; background: #f8f9fb; }
.tp-ref { font-family: monospace; font-size: 8.5pt; color: #667; background: #f1f3f4; padding: 0 4px; border-radius: 4px; margin-right: 4px; }
.tp-desc { font-size: 8pt; color: #889; white-space: pre-line; }
.tp-remise { color: #e65100; font-size: 8pt; }
.tp-retirer { color: #c62828; cursor: pointer; opacity: 0.6; }
.tp-retirer:hover { opacity: 1; }

/* Actions : la règle .page_atelier button (0-1-1) est plus forte qu'une classe seule */
.tp-piece-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
body.dm-page-atelier button.tp-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 9pt;
  font-weight: 500;
  background: #f0f2f5;
  color: #334;
  border: 1px solid #dde0e6;
}
body.dm-page-atelier button.tp-btn-primaire { background: var(--main-bg-color); color: #fff; border-color: var(--main-bg-color); }
body.dm-page-atelier button.tp-btn-vert { background: #2e7d32; color: #fff; border-color: #2e7d32; }
body.dm-page-atelier button.tp-btn-lien { background: transparent; color: #889; border-color: transparent; margin-left: auto; }
body.dm-page-atelier button.tp-btn-lien:hover { color: #c62828; }
.tp-recharger { color: #aab; cursor: pointer; margin-left: auto; padding: 6px; }
.tp-recharger:hover { color: var(--main-bg-color); }
.tp-ajout { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }

/* Éditeur de lignes */
.tp-editeur { text-align: left; }
.tp-input {
  border: 1px solid #dde0e6; border-radius: 6px; padding: 4px 6px; font-size: 9pt; box-sizing: border-box;
}
.tp-input-desc { display: block; width: 100%; margin-top: 2px; resize: vertical; min-height: 38px; font-family: inherit; line-height: 1.3; }
/* Éditeur : le panneau de détail ne fait que ~440 px de large → chaque ligne sur DEUX rangées
   (désignation pleine largeur, puis qté / PU / remise / total / corbeille en grille), en-têtes alignés */
.tp-lignes-edit, .tp-lignes-edit thead, .tp-lignes-edit tbody, .tp-lignes-edit tfoot { display: block; }
.tp-lignes-edit thead tr, .tp-lignes-edit tbody tr {
  display: grid; grid-template-columns: 70px 96px 76px 1fr 24px; gap: 4px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid #eef0f3;
}
.tp-lignes-edit thead th.tp-td-libelle { display: none; }
.tp-lignes-edit thead th { border: none; padding: 0 2px; }
.tp-lignes-edit tbody td { border: none; padding: 2px; }
.tp-lignes-edit tbody td.tp-td-libelle { grid-column: 1 / 6; }
.tp-lignes-edit tbody td.tp-vide { grid-column: 1 / 6; }
.tp-lignes-edit tfoot tr { display: flex; justify-content: flex-end; gap: 12px; padding: 2px 6px; }
.tp-lignes-edit tfoot td { border: none; padding: 2px 0; }
.tp-lignes-edit tfoot td:last-child { display: none; }
.tp-input-qte, .tp-input-prix, .tp-input-remise { width: 100%; }
.tp-input-qte { width: 62px; }
.tp-input-prix { width: 84px; text-align: right; }
.tp-input-remise { width: 56px; text-align: right; }
.tp-input-montant { width: 100px; text-align: right; }
.tp-services { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tp-services-titre, .tp-services-cat { font-size: 8.5pt; color: #778; font-weight: 600; }
.tp-services-groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.tp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 14px; font-size: 8.5pt;
  background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; cursor: pointer; white-space: nowrap;
}
.tp-chip small { color: #5c7fa8; }
.tp-chip:hover { background: #bbdefb; }
.tp-chip-actif { background: var(--main-bg-color); color: #fff; border-color: var(--main-bg-color); }
.tp-plus { font-size: 8.5pt; color: var(--main-button); text-decoration: none; }
.tp-plus:hover { text-decoration: underline; }
.tp-recherche { position: relative; display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.tp-recherche > .fa-magnifying-glass { color: #889; }
.tp-input-recherche { flex: 1; }
.tp-resultats {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid #dde0e6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 260px; overflow-y: auto;
}
.tp-resultat { padding: 6px 10px; cursor: pointer; font-size: 9pt; border-bottom: 1px solid #f0f2f5; display: flex; gap: 6px; align-items: center; }
.tp-resultat:hover { background: #f3f5f8; }
.tp-resultat-prix { margin-left: auto; color: #556; white-space: nowrap; font-size: 8.5pt; }

/* Paiement en ligne (main.css : label en 30 % gras → neutralisé) */
.tp-pay { margin-top: 8px; padding: 8px 10px; background: #f1f8f1; border: 1px solid #cfe5cf; border-radius: 8px; }
.tp-pay-titre { font-weight: 600; color: #1b5e20; margin-bottom: 4px; }
.tp-pay-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.tp-pay-champs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0; }
.tp-pay-champs label { width: auto; margin: 0; font-weight: 400; font-size: 9pt; color: #445; display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 768px) {
  .tp-piece-tete { gap: 6px; padding: 7px 8px; }
  .tp-piece-total { margin-left: 0; width: 100%; }
  .tp-lignes-edit thead tr, .tp-lignes-edit tbody tr { grid-template-columns: 60px 84px 64px 1fr 24px; }
  body.dm-page-atelier button.tp-btn-lien { margin-left: 0; }
  .tp-recherche { flex-wrap: wrap; }
  .modal-container-fi { width: 95%; }
  .fi-rapport-date { flex-basis: 60px; }
}