/* ============================================================================
   TICKETS — encart exhaustif du tableau de bord.

   Chargée par base.html.twig APRÈS app.css : elle ne redéfinit donc que ce qui
   est propre à l'encart, et l'emporte sur les règles générales des cartes sans
   avoir à forcer quoi que ce soit.

   MOBILE D'ABORD. L'encart se consulte debout en boutique : la règle de base est
   UNE colonne, une carte pleine largeur, des cibles au pouce. Les colonnes
   s'ajoutent ensuite, à mesure qu'il y a de la place — 2, puis 4, puis 8.
   Aucune largeur fixe nulle part : rien ne peut déborder de la page.
   ============================================================================ */

/* Largeur de l'encart : réglable depuis le 24/09/2026 (grille des encarts, app.css) ;
   pleine largeur par défaut. Ses mises en page internes suivent la largeur de
   L'ENCART (container queries « encart »), plus celle de l'écran. */

/* ============================================================================
   VOILE DE DÉPÔT DE FICHIERS — la règle qui manquait.

   `.pj-voile` (app.css) impose `display: flex` SANS rétablir la règle par défaut
   de l'attribut `hidden`. Or `[hidden] { display: none }` vient de la feuille du
   NAVIGATEUR : une règle d'auteur de même spécificité l'emporte toujours. Le
   voile était donc affiché EN PERMANENCE — `position: fixed; inset: 0` et un fond
   à 82 % d'opacité : c'est lui qui assombrissait toute la fiche du ticket dès son
   ouverture, sans qu'aucun fichier n'ait jamais été glissé.

   Toutes les autres surfaces à display imposé de l'application portent déjà ce
   garde-fou (.mdl[hidden], .pal[hidden], .modal[hidden], .tk-repere[hidden]…) ;
   celle-ci avait été oubliée. La règle est posée ici parce que cette feuille est
   chargée APRÈS app.css : elle l'emporte sans avoir à forcer quoi que ce soit.

   Le gabarit pose EN PLUS un `style="display:none"` sur le voile, et le script le
   pilote : la fiche reste lisible même si cette feuille n'arrive pas.
   ============================================================================ */
.pj-voile[hidden] { display: none; }

/* ---------------------------------------------------------------- en-tête */

/* Le titre et les filtres : empilés au téléphone (ils prennent la largeur), en
   ligne dès qu'il y a la place. `.toolbar` enroule déjà, on ne règle ici que la
   largeur des champs. */
.tk-encart-tete { margin-bottom: 10px; }
.tk-encart-filtres { flex: 1 1 100%; min-width: 0; }
.tk-encart-filtres .tk-filtre-combo { flex: 1 1 200px; min-width: 0; }
.tk-encart-filtres .tk-filtre-combo input[type="text"] { width: 100%; min-width: 0; }
.tk-encart-filtres select { flex: 0 1 auto; min-width: 150px; }
@container encart (min-width: 814px) {
  /* De la place : les filtres reviennent à droite du titre, sur une seule ligne. */
  .tk-encart-filtres { flex: 0 1 auto; }
  .tk-encart-filtres .tk-filtre-combo { flex: 0 1 260px; }
}

/* Encart en cours de rechargement : on montre que ça travaille sans faire
   sauter la mise en page (le contenu reste en place, simplement estompé). */
.tk-encart[aria-busy="true"] { opacity: .55; transition: opacity .12s ease; }

.tk-encart-vide { padding: 26px 16px; }
.tk-encart-pied { margin: 6px 0 0; }

/* ------------------------------------------------------- grille des cartes */

/*
  8 CARTES PAR LIGNE sur grand écran, et une retombée franche : 8 → 4 → 2 → 1.
  Colonnes EXPLICITES et non `auto-fill` : Franck a demandé huit cartes par
  ligne, pas « autant que ça rentre » — le nombre doit être le même d'un groupe
  de priorité à l'autre, quelle que soit la longueur des titres.

  minmax(0, 1fr) et non 1fr : sans le 0, la largeur minimale d'une colonne de
  grille vaut sa taille min-content (le plus long mot d'un titre, un nom de
  boutique), la grille s'élargit au-delà de son conteneur et c'est TOUTE la page
  du tableau de bord qui part en travers. Même piège que la piste météo.
*/
.tk-grid-8 {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@container encart (min-width: 442px) { .tk-grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container encart (min-width: 814px) { .tk-grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container encart (min-width: 1314px) { .tk-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; } }

/* --------------------------------------------------------------- la carte */

/* Cartes plus compactes que dans la liste complète : à huit par ligne, chaque
   pixel de marge se paie sur la largeur du titre. */
.tk-encart .tk-card { padding: 9px 10px 9px 13px; gap: 6px; min-width: 0; }
.tk-encart .tk-head { gap: 6px; min-width: 0; }
.tk-encart .tk-site { font-size: 9.5px; min-width: 0; }
.tk-encart .tk-age { font-size: 10px; }

/* Trois lignes de titre : à 160 px de large, deux lignes coupaient au milieu du
   premier mot utile. `anywhere` : un identifiant sans espace (« ORD-2026-00184 »)
   passe à la ligne au lieu d'élargir sa colonne. */
.tk-encart .tk-title {
  font-size: 12.5px;
  line-height: 1.3;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

/* Étiquette de priorité : elle NOMME ce que le liseré coloré de la carte
   montre déjà. Indispensable pour qui ne distingue pas les trois teintes. */
.tk-prio {
  font-size: 10px; line-height: 1.6; padding: 0 6px; border-radius: 999px;
  white-space: nowrap; border: 1px solid var(--border); color: var(--muted);
}
.tk-prio.p3 { color: var(--danger); border-color: rgba(251, 95, 122, .45); }
.tk-prio.p2 { color: var(--warn); border-color: rgba(251, 191, 36, .45); }
.tk-prio.p1 { color: var(--accent); border-color: rgba(53, 208, 242, .4); }
/* À huit par ligne, l'étiquette ne tient plus : le liseré et le titre du groupe
   disent déjà la priorité, on garde la place pour le titre et le chrono. */
@container encart (min-width: 1314px) { .tk-encart .tk-prio { display: none; } }

.tk-encart .tk-foot { gap: 5px; font-size: 10.5px; }

/* Ticket dont le chrono TOURNE : il doit sauter aux yeux depuis l'autre bout de
   la pièce — c'est le seul moyen de ne pas laisser un chrono courir la nuit. */
.tk-card.tk-en-cours {
  border-color: var(--success);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .35), 0 8px 22px rgba(0, 0, 0, .35);
}
.tk-card.tk-en-cours::before { background: var(--success); }
.tk-act-stop { color: var(--danger); border-color: rgba(251, 95, 122, .45); }
.tk-act-stop:hover { border-color: var(--danger); color: var(--danger); }

/* ------------------------------------------------------------- les actions */

/*
  Dans l'encart, les actions sont TOUJOURS visibles. Ailleurs elles n'apparaissent
  qu'au survol (`.tk-actions { opacity: 0 }`), ce qui va pour une liste qu'on
  parcourt — mais ici le bouton de chrono est la raison d'être de l'encart, et sur
  un écran tactile il n'y a pas de survol du tout.
*/
.tk-encart .tk-actions { opacity: 1; }
.tk-encart .tk-chrono { display: inline-flex; }

/*
  CIBLES AU POUCE. Sous 768 px on est sur un téléphone : 44 px de côté, le
  minimum tenable debout dans une boutique. 31/10/2026 : aussi au DOIGT sur un
  grand écran tactile (iPad Pro 13 : 1032-1376 px, ▶ et ⧉ faisaient 22 px). Le Mac
  (pointeur fin) n'est pas touché.
*/
@media (max-width: 767px), (pointer: coarse) {
  .tk-encart .tk-act {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; padding: 0 10px;
  }
  .tk-encart .tk-actions { gap: 8px; }
  /* La poignée de classement suit la même règle. */
  .tk-encart .tk-poignee { width: 44px; height: 44px; margin: -12px -8px -12px -12px; font-size: 16px; }
  /* Le lien étiré du titre couvre déjà toute la carte : la cible d'ouverture du
     ticket fait la hauteur de la carte, largement au-delà de 44 px. */
  .tk-encart .tk-card { min-height: 88px; }
}

/* ----------------------------------------------------- groupes de priorité */

/* Titres de groupe plus discrets que dans la liste complète : ici ils séparent
   trois lots à l'intérieur d'un encart, ils ne titrent pas un écran. */
.tk-encart .tk-groupe-titre { font-size: 11px; margin: 14px 0 7px; }
.tk-encart .tk-groupe:first-of-type .tk-groupe-titre { margin-top: 2px; }
/* Le message d'échec de classement colle sous l'en-tête de l'encart, pas sous
   la barre du HUD : l'encart n'est pas en haut de la page. */
.tk-encart .flash.tk-ordre-msg { position: static; }

/* ------------------------------------------- ce que dit le chrono, sur place */

/* Lancer ou arrêter un chrono depuis une carte ne recharge pas la page : le
   message du hub (« plafonné à 8 h, saisie NON FACTURABLE ») s'affiche ici.
   Le garde-fou `[hidden]` est posé d'office — c'est exactement l'oubli qui
   laissait `.pj-voile` assombrir la fiche en permanence. */
.tk-encart .flash.tk-encart-msg { margin: 0 0 12px; }
.tk-encart .flash.tk-encart-msg[hidden] { display: none; }

/* ---------- Onglets de statut de l'encart (24/09/2026) ----------
   BACKLOGS / À FAIRE / À VALIDER / ARCHIVE, centrés, un seul actif. Collés sous la
   barre fixe du HUD pendant qu'on fait défiler l'encart : une carte glissée depuis le
   bas d'une longue liste peut toujours y être déposée. Fond opaque, sinon les cartes
   défileraient au travers. */
.tk-statuts {
  position: sticky; top: 54px; z-index: 6;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 -6px 14px; padding: 6px;
  background: var(--card); border-radius: 12px;
}
.tk-statut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--border-lit); background: var(--bg-2); color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.tk-statut:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
.tk-statut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-statut.actif { color: #06121c; background: var(--accent); border-color: var(--accent); }
.tk-statut-n {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-family: var(--font-num); font-size: 11px; background: rgba(255, 255, 255, .07);
}
.tk-statut.actif .tk-statut-n { background: rgba(0, 0, 0, .16); }

/* Pendant un glisser : les AUTRES statuts s'annoncent comme cibles ; celui qu'on
   survole s'allume. La carte, elle, se fait discrète au-dessus d'un onglet. */
body.tk-glisse-en-cours .tk-statut:not(.actif) { border-style: dashed; border-color: rgba(53, 208, 242, .6); color: var(--fg); }
.tk-statut.tk-depot-survol {
  border-style: solid !important; border-color: var(--accent) !important;
  background: var(--accent-soft); transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(53, 208, 242, .4);
}
.tk-card.tk-glisse.tk-sur-depot { opacity: .45; }

@media (max-width: 899px) { .tk-statuts { top: 48px; } }
/* Téléphone : deux par ligne, cibles de 44 px au doigt. */
@media (max-width: 420px) {
  .tk-statuts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .tk-statut { min-height: 44px; padding: 6px 8px; letter-spacing: .04em; }
}
/* Fiche ticket : section « Interventions » (01/10/2026). Mobile d'abord : date et durée
   sur une ligne, libellé dessous ; une grille sur une seule ligne dès 640 px. */
.tk-inter-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tk-inter-tete h2 { margin-bottom: .5rem; }
.tk-inter-total { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; }
.tk-inter-cours { display: flex; align-items: center; gap: 8px; margin: 0 0 .5rem; color: var(--accent); }
.tk-inter-liste { list-style: none; margin: 0; padding: 0; }
.tk-inter-liste li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date duree" "lib lib" "fact fact";
  gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border);
}
.tk-inter-date { grid-area: date; font-family: var(--font-num); font-size: 12px; color: var(--muted); }
.tk-inter-date i { font-style: normal; margin-left: 2px; color: var(--dim); }
.tk-inter-lib { grid-area: lib; min-width: 0; overflow-wrap: anywhere; }
.tk-inter-fact { grid-area: fact; font-size: 12px; }
.tk-inter-duree { grid-area: duree; font-family: var(--font-num); font-weight: 700; color: var(--fg); white-space: nowrap; text-align: right; }
.tk-inter-pied { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border-lit); font-weight: 600; }
.tk-inter-pied strong { font-family: var(--font-num); color: var(--accent); }
@media (min-width: 640px) {
  .tk-inter-liste li { grid-template-columns: 118px minmax(0, 1fr) auto 64px; grid-template-areas: "date lib fact duree"; align-items: baseline; }
  .tk-inter-fact { text-align: right; }
}

/* Mentions « @ » dans les commentaires (01/10/2026). */
.tk-mention { color: var(--accent); font-weight: 600; background: rgba(53, 208, 242, .1); border-radius: 3px; padding: 0 2px; }
.tk-mention-sugg {
  list-style: none; margin: 4px 0 0; padding: 4px; max-width: 360px;
  background: linear-gradient(180deg, var(--card-2, #141c2c), var(--card, #0e1420));
  border: 1px solid var(--border-lit); border-radius: var(--radius-sm, 6px); box-shadow: var(--lift), var(--glow);
}
.tk-mention-sugg li { padding: 8px 10px; min-height: 36px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.tk-mention-sugg li[aria-selected="true"], .tk-mention-sugg li:hover { background: rgba(53, 208, 242, .16); color: var(--accent); }
@media (max-width: 767px) { .tk-mention-sugg { max-width: none; } .tk-mention-sugg li { min-height: 44px; display: flex; align-items: center; } }

/* ============================================================================
   FICHE TICKET EN DEUX COLONNES + DISCUSSION (Franck, 02/10/2026)
   À gauche le ticket, à droite la discussion façon messagerie. Dans la modale,
   la boîte prend toute la hauteur et chaque colonne défile pour elle-même ;
   sur téléphone, une colonne à la fois (onglets).
   ============================================================================ */
.mdl-box:has(.tk-fiche) { max-width: 1480px; height: 90vh; height: 90dvh; }
.mdl-body:has(.tk-fiche) { flex: 1; min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mdl-body > .frag:has(.tk-fiche) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mdl-body > .frag:has(.tk-fiche) > .flash { margin: 10px 14px 0; }

.tk-fiche {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
}
/* Pleine page (lien direct, palette) : la fiche tient dans la fenêtre. */
main .tk-fiche { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 560px; }
.mdl-body .tk-fiche { height: auto; min-height: 0; }

.tk-onglets { display: none; }
.tk-gauche-cadre { position: relative; min-width: 0; min-height: 0; display: flex; }
.tk-gauche { flex: 1; min-width: 0; overflow-y: auto; padding: 18px; overscroll-behavior: contain; }
.tk-gauche .card:last-child { margin-bottom: 0; }
.mdl-body .tk-gauche > .toolbar h1 { font-size: 17px; }
/* Le voile du glisser-déposer de l'encart « Pièces jointes » ne couvre que cette colonne. */
.tk-gauche-cadre .pj-voile { position: absolute; }

.tk-pj-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; margin: .6rem 0; }
.tk-pj-grille > .card { width: auto !important; margin: 0; }
/* PJ en PDF : vignette cliquable → visionneuse de DELMAK (09/10/2026). */
.tk-pj-pdf {
  height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 6px; border: 1px dashed var(--border, rgba(255, 255, 255, .14)); font-size: 2rem; text-decoration: none; color: inherit;
}
.tk-pj-pdf:hover, .tk-pj-pdf:focus-visible { border-color: var(--accent); background: rgba(53, 208, 242, .08); text-decoration: none; }
.tk-pj-pdf-lib { font-size: 12px; color: var(--accent); }
.tk-pj-message {
  margin-top: .35rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 500 11.5px var(--font);
}
.tk-pj-message:hover { text-decoration: underline; }

/* ------------------------------------------------------------- discussion */
.tk-discussion {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10, 15, 26, .55), rgba(6, 9, 16, .7));
}
.dc-tete {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.dc-tete .ic { width: 18px; height: 18px; color: var(--accent); }
.dc-tete h2 { margin: 0; font-size: 14px; }
.dc-avec { color: var(--muted); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-direct {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: 500 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--success);
}
.dc-direct::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: dcPouls 2s ease-in-out infinite; }
.dc-direct.dc-coupe { color: var(--warn); }
@keyframes dcPouls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.dc-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 6px; overscroll-behavior: contain; scroll-behavior: auto; }
.dc-vide { margin: 18% auto 0; max-width: 300px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }
.dc-messages { display: flex; flex-direction: column; }

.dm-jour { display: flex; justify-content: center; margin: 14px 0 8px; position: sticky; top: 0; z-index: 1; pointer-events: none; }
.dm-jour span {
  padding: 3px 11px; border-radius: 99px; font: 600 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: rgba(14, 20, 32, .92); border: 1px solid var(--border);
}

.dm { --dm-teinte: 200; display: flex; gap: 9px; align-items: flex-end; margin-top: 12px; max-width: 86%; }
.dm-nous { flex-direction: row-reverse; margin-left: auto; }
.dm-eux { margin-right: auto; }
.dm-suite { margin-top: 3px; }
.dm-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font); color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, hsl(var(--dm-teinte) 62% 46%), hsl(calc(var(--dm-teinte) + 40) 62% 34%));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}
/* Messages d'affilée du même auteur : un seul avatar, en bas du groupe. */
.dm-a-suite .dm-avatar { visibility: hidden; }
.dm-corps { min-width: 0; display: flex; flex-direction: column; }
.dm-nous .dm-corps { align-items: flex-end; }
.dm-tete { display: flex; align-items: baseline; gap: 7px; margin: 0 4px 3px; }
.dm-suite .dm-tete { display: none; }
.dm-auteur { font: 600 12px var(--font); color: hsl(var(--dm-teinte) 70% 72%); }
.dm-nous .dm-auteur { color: var(--accent); }
.dm-heure { font: 400 10.5px var(--font-num); color: var(--dim); }

.dm-bulle {
  position: relative; min-width: 0; max-width: 100%;
  padding: 8px 12px; border-radius: 16px;
  background: var(--card-2); border: 1px solid var(--border-lit);
  color: var(--fg); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.dm-eux .dm-bulle { border-bottom-left-radius: 5px; }
.dm-nous .dm-bulle {
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, rgba(53, 208, 242, .2), rgba(124, 108, 246, .2));
  border-color: rgba(53, 208, 242, .38);
}
.dm-a-suite.dm-eux .dm-bulle { border-bottom-left-radius: 16px; }
.dm-a-suite.dm-nous .dm-bulle { border-bottom-right-radius: 16px; }
.dm-suite.dm-eux .dm-bulle { border-top-left-radius: 5px; }
.dm-suite.dm-nous .dm-bulle { border-top-right-radius: 5px; }
.dm-texte > :first-child { margin-top: 0; }
.dm-texte > :last-child { margin-bottom: 0; }
.dm-texte p { margin: 0 0 .45em; }
.dm-texte ul, .dm-texte ol { margin: .3em 0 .45em; padding-left: 1.35em; }
.dm-texte blockquote { margin: .3em 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--border-lit); color: var(--muted); }
.dm-texte code { font: 12.5px var(--font-num); padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.dm-texte pre { margin: .35em 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .4); overflow-x: auto; font: 12.5px/1.45 var(--font-num); white-space: pre; }
.dm-texte a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dm-nous .dm-texte a { color: #9ae8ff; }

/* Aperçu des images DANS le message (en plus de l'encart des pièces jointes). */
.dm-images { display: grid; gap: 4px; margin: 6px -6px 2px; border-radius: 12px; overflow: hidden; }
.dm-bulle > .dm-images:first-child { margin-top: -2px; }
.dm-images.n1 { grid-template-columns: 1fr; }
.dm-images.n2, .dm-images.n4 { grid-template-columns: 1fr 1fr; }
.dm-images.n3 { grid-template-columns: 1fr 1fr 1fr; }
.dm-image { display: block; background: rgba(0, 0, 0, .35); line-height: 0; }
.dm-image img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 300px; min-height: 90px; }
.dm-images.n1 .dm-image img { width: auto; max-width: 100%; height: auto; max-height: 260px; margin: 0 auto; object-fit: contain; }
.dm-images:not(.n1) .dm-image img { aspect-ratio: 1; max-height: none; }
.dm-image:hover img { filter: brightness(1.08); }

.dm-fichiers { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 4px; }
.dm-fichiers a, .dm-fichier {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--border); color: var(--fg); text-decoration: none;
}
.dm-fichiers a:hover { border-color: var(--accent); }
.dm-fichier-ico {
  flex: none; min-width: 34px; height: 26px; padding: 0 4px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font: 700 9.5px var(--font-num); color: var(--accent); background: var(--accent-soft);
}
.dm-fichier-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.dm-fichier-taille { margin-left: auto; flex: none; font: 10.5px var(--font-num); color: var(--muted); }

.dm-pied { margin: 2px 6px 0; min-height: 14px; }
.dm-statut { font: 500 10.5px var(--font); color: var(--dim); }
.dm-recu { color: var(--accent); }
.dm-optimiste .dm-bulle { opacity: .72; }
.dm-optimiste .dm-statut { animation: dcPouls 1.2s ease-in-out infinite; }
.dm-echec .dm-bulle { opacity: 1; border-color: var(--danger); }
.dm-echec .dm-statut { color: var(--danger); animation: none; }
.dm-reessayer { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 11px var(--font); cursor: pointer; text-decoration: underline; }
/* Un message qui arrive : il glisse en place. */
.dm-arrive { animation: dmArrive .38s cubic-bezier(.2, .9, .3, 1.2); }
.dm-maj .dm-statut { animation: dmEclat .9s ease-out; }
.dm-eclaire .dm-bulle { animation: dmHalo 1.6s ease-out; }
@keyframes dmArrive { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dmEclat { from { color: #fff; text-shadow: 0 0 8px var(--accent); } }
@keyframes dmHalo { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dm-arrive, .dm-maj .dm-statut, .dm-eclaire .dm-bulle, .dc-direct::before, .dc-points i { animation: none; } }

/* « Marie écrit… » */
.dc-frappe { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px 2px; color: var(--muted); font-size: 12px; }
.dc-frappe[hidden] { display: none; }
.dc-points { display: inline-flex; gap: 3px; padding: 7px 10px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border-lit); }
.dc-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: dcRebond 1.1s ease-in-out infinite; }
.dc-points i:nth-child(2) { animation-delay: .15s; }
.dc-points i:nth-child(3) { animation-delay: .3s; }
@keyframes dcRebond { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.dc-nouveaux {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 3;
  padding: 6px 14px; border-radius: 99px; border: 1px solid var(--accent); cursor: pointer;
  background: rgba(8, 11, 19, .92); color: var(--accent); font: 600 12px var(--font);
  box-shadow: var(--glow);
}
.dc-nouveaux[hidden] { display: none; }

/* Voile du glisser-déposer sur la discussion. */
.dc-depot {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 19, .78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.dc-depot[hidden] { display: none; }
.dc-depot span {
  padding: 18px 28px; border-radius: var(--radius); border: 2px dashed var(--accent);
  background: var(--accent-soft); color: var(--accent); font: 600 14px var(--font);
}

/* ------------------------------------------------------------- saisie */
.dc-saisie {
  position: relative; flex: none; margin: 6px 12px 12px;
  border: 1px solid var(--border-lit); border-radius: 14px; background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.dc-saisie:focus-within { border-color: rgba(53, 208, 242, .55); box-shadow: 0 0 0 3px rgba(53, 208, 242, .1); }
.dc-outils { display: flex; align-items: center; gap: 2px; padding: 5px 6px 0; }
.dc-outils button {
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; border: 0; cursor: pointer;
  background: none; color: var(--muted); font: 600 12.5px var(--font);
}
.dc-outils button:hover { background: rgba(255, 255, 255, .06); color: var(--fg); }
.dc-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--border-lit); }
.dc-zone {
  position: relative;
  min-height: 44px; max-height: 38vh; overflow-y: auto; padding: 8px 12px;
  outline: none; color: var(--fg); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
.dc-zone.dc-zone-vide::before { content: attr(data-placeholder); color: var(--dim); pointer-events: none; position: absolute; }
.dc-zone p, .dc-zone div { margin: 0; }
.dc-zone ul, .dc-zone ol { margin: .2em 0; padding-left: 1.4em; }
.dc-zone blockquote { margin: .2em 0; padding-left: 10px; border-left: 3px solid var(--border-lit); color: var(--muted); }
.dc-zone code { font: 13px var(--font-num); padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.dc-zone a { color: var(--accent); }
.dc-zone .tk-mention { white-space: nowrap; }
.dc-pied { display: flex; align-items: center; gap: 10px; padding: 0 8px 8px 12px; }
.dc-aide { color: var(--dim); font-size: 11px; }
.dc-client { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.dc-envoyer { padding: 7px 16px; border-radius: 10px; }
.dc-envoyer:disabled { opacity: .45; cursor: default; }
.dc-erreur { margin: 0 12px 10px; color: var(--danger); font-size: 12px; }
.dc-erreur[hidden] { display: none; }

/* Fichiers en brouillon (déposés, message pas encore envoyé). */
.dc-pj { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.dc-pj:empty { display: none; }
.dc-puce {
  position: relative; display: flex; align-items: center; gap: 7px; max-width: 220px;
  padding: 4px 26px 4px 4px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--border-lit);
  overflow: hidden;
}
.dc-puce img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; flex: none; }
.dc-puce-ext { flex: none; width: 38px; height: 38px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 10px var(--font-num); color: var(--accent); background: var(--accent-soft); }
.dc-puce-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fg); }
.dc-puce-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0, 0, 0, .5); color: var(--fg); font-size: 14px; line-height: 1; }
.dc-puce-x:hover { background: var(--danger); }
.dc-puce-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); display: none; }
.dc-puce-envoi .dc-puce-barre { display: block; }
.dc-puce-envoi img, .dc-puce-envoi .dc-puce-ext { opacity: .55; }
.dc-puce-barre i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }

/* Suggestions « @ » : au-dessus de la zone de saisie. */
.dc-sugg {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 6;
  list-style: none; margin: 0; padding: 4px; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border-lit); border-radius: 10px; background: var(--card-2); box-shadow: var(--lift);
}
.dc-sugg[hidden] { display: none; }
.dc-sugg li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.dc-sugg li[aria-selected="true"], .dc-sugg li:hover { background: rgba(53, 208, 242, .16); color: var(--accent); }
.dc-sugg-espace { margin-left: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------- téléphone */
@media (max-width: 899px) {
  .tk-fiche { display: flex; flex-direction: column; }
  main .tk-fiche { height: calc(100vh - 110px); height: calc(100dvh - 110px); min-height: 480px; }
  .tk-onglets { display: flex; flex: none; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .tk-onglet {
    flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--border-lit); cursor: pointer;
    background: none; color: var(--muted); font: 600 13.5px var(--font);
  }
  .tk-onglet[aria-selected="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  .tk-onglet-nb:not(:empty) { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: #04131a; font-size: 11px; }
  .tk-fiche[data-onglet="ticket"] .tk-discussion { display: none; }
  .tk-fiche[data-onglet="discussion"] .tk-gauche-cadre { display: none; }
  .tk-gauche-cadre, .tk-discussion { flex: 1; min-height: 0; }
  .tk-gauche { padding: 14px; }
  .tk-discussion { border-left: 0; }
  .dm { max-width: 92%; }
  .dc-aide { display: none; }
  .dc-saisie { margin: 6px 8px 8px; }
  .dc-outils button { min-width: 36px; height: 36px; }
  /* Étroit : l'essentiel seulement — le trombone ne doit jamais sortir de l'écran. */
  .dc-outils { overflow: hidden; }
  .dc-outils [data-cmd="strikeThrough"], .dc-outils [data-cmd="code"], .dc-outils [data-cmd="citation"] { display: none; }
  .dm-images.n1 .dm-image img { max-height: 220px; }
  .dc-envoyer { min-height: 44px; }
  .dc-sugg li { min-height: 44px; display: flex; align-items: center; }
}

/* --------------------------------------------------- auteur du ticket (13/10/2026) */
/* « par Marie D. » : une ligne discrète sous le titre de la carte (encart et /tickets), collée au
   titre, abrégée en « … » si la carte est étroite. Dans le pied, il poussait les actions à la ligne
   (huit cartes par ligne, téléphone) : ici, le pied reste tel qu'il était. */
.tk-auteur {
  margin: -4px 0 0; align-self: flex-start; max-width: 100%;
  font-size: 11px; line-height: 1.35; color: var(--muted, #8a8f98);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-encart .tk-auteur { margin-top: -2px; font-size: 10.5px; }
/* Au-dessus du lien étiré de la carte, pour que le title (nom complet, origine) s'affiche au survol —
   seulement là où l'on survole, et sur la largeur du texte : au doigt, toucher l'auteur ouvre le
   ticket comme le reste de la carte. */
@media (hover: hover) { .tk-auteur { position: relative; z-index: 2; cursor: default; } }
/* Fiche : « par X · depuis le BO » dans la ligne de méta ; un nom très long passe à la ligne
   (jamais de défilement horizontal au téléphone). */
.tk-auteur-fiche { overflow-wrap: anywhere; }

/* ------------------------------------------------- estimation du ticket (14/10/2026) */
/* Ligne sous le titre de la carte (encart et /tickets) : « par Marie D. » à gauche, la pastille d'estimation
   (« 2-4 h ») au bout. L'auteur s'abrège en « … », la pastille ne rétrécit ni ne passe à la ligne : le pied
   (priorité, compteurs, actions) reste tel qu'il était, à huit colonnes comme au téléphone. */
.tk-infos { display: flex; align-items: center; gap: 6px; min-width: 0; margin: -4px 0 0; }
.tk-encart .tk-infos { margin-top: -2px; }
.tk-infos .tk-auteur { margin: 0; min-width: 0; flex: 0 1 auto; align-self: center; }
.tk-estim {
  flex: none; margin-left: auto; position: relative;
  font-family: var(--font-num); font-size: 10px; line-height: 1.6; padding: 0 6px; border-radius: 999px;
  white-space: nowrap; border: 1px solid var(--border); color: var(--muted);
}
.tk-encart .tk-estim { font-size: 9.5px; padding: 0 5px; }
/* Au-dessus du lien étiré pour que la plage complète (title) s'affiche au survol ; au doigt, toucher la
   pastille ouvre le ticket comme le reste de la carte (même règle que l'auteur). */
@media (hover: hover) { .tk-estim { z-index: 2; cursor: default; } }

/* Filtre de l'encart : « Estimation » + liste, sur la ligne des filtres. */
.tk-encart-filtres .tk-est-lib { margin: 0; white-space: nowrap; }
.tk-encart-filtres .tk-est-select { min-width: 150px; }
@media (max-width: 767px) {
  .tk-encart-filtres .tk-est-select { min-height: 44px; flex: 1 1 160px; }
}
.tk-est-raz { white-space: nowrap; }
/* Auteur et tri de l'encart (01/11/2026) : sur la même ligne ; un nom long ne déborde pas au téléphone. */
.tk-encart-filtres .tk-filtre-select { min-width: 150px; max-width: 100%; }
@media (max-width: 767px) {
  .tk-encart-filtres .tk-filtre-select { min-height: 44px; flex: 1 1 160px; }
}
@media (pointer: coarse) { .tk-encart-filtres select { min-height: 44px; } }
/* 16 px au téléphone et au doigt : en dessous, Safari iOS agrandit toute la page quand on touche la liste. */
@media (max-width: 767px), (pointer: coarse) { .tk-encart-filtres select { font-size: 16px; } }
/* Pages de l'encart : au-dessus et au-dessous de la liste. */
.tk-encart .tk-encart-pages { margin: 0 0 10px; }
.tk-encart .tk-groupes + .tk-encart-pages { margin: 10px 0 0; }

/* Fenêtre « Nouveau ticket » : l'estimation prend la largeur d'une colonne (celle de la boutique), pas
   toute la ligne ; 44 px de haut au téléphone. */
@media (min-width: 640px) { .tq-estim select { max-width: calc(50% - 6px); } }
@media (max-width: 767px) { .tq-estim select { min-height: 44px; } }

/* ============================================================================
   FICHE TICKET, 18/10/2026 (Franck : « Modale ticket : enlever le lien "Tous les tickets" ; le titre est en
   doublon : enlever le second ; colonne de gauche, sur une ligne : nom du site, priorité, date et auteur de
   création. Passer d'un ticket à un autre en carrousel, la modale restant ouverte. Pouvoir modifier /
   supprimer une intervention dans l'écran d'un ticket. »)
   ============================================================================ */

/* Titre écrit UNE fois : dans la barre de la modale. Le <h1> ne reste qu'en page pleine (pas de barre). */
.mdl-body .tk-titre-page { display: none; }
.tk-tete { gap: 8px 10px; margin-bottom: 14px; }
.tk-tete .tk-titre-page { flex: 1 1 100%; margin: 0; }

/* Boutique · priorité · date · auteur : UNE ligne, sur toute la largeur de la colonne, les actions dessous.
   Trop longue, l'auteur s'abrège d'abord, puis le nom de la boutique (nom complet en title) — jamais de
   retour à la ligne ni de défilement horizontal, au téléphone non plus.
   Toujours sous .tk-tete (relecture du 18/10/2026) : les cartes de tickets (_carte.html.twig) ont AUSSI des
   .tk-meta (💬 3, 🔒, 📎 2) dans leur pied qui passe à la ligne — une règle nue les mettait chacun sur sa ligne. */
.tk-tete .tk-meta {
  flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  white-space: nowrap; color: var(--muted); font-size: 13px; line-height: 1.5;
}
.tk-tete .tk-meta > * { flex: none; }
.tk-meta-sep { color: var(--dim); }
.tk-tete .tk-meta .tk-meta-site { flex: 0 1 auto; min-width: 2.5em; }
.tk-tete .tk-meta .tk-meta-site > summary { max-width: 100%; }
.tk-meta-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-tete .tk-meta a.tk-meta-nom { display: block; }
.tk-tete .tk-meta .tk-auteur-fiche { flex: 0 100 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.tk-meta-prio.p3 { color: var(--danger); }
.tk-meta-prio.p2 { color: var(--warn); }
.tk-meta-prio.p1 { color: var(--fg); }
/* Le panneau « Déplacer le ticket vers » vit dans cette ligne : il reprend un texte qui passe à la ligne. */
.tk-tete .tk-meta .tk-menu-pan { white-space: normal; }

/* ------------------------------------------------------------- carrousel */
/* Barre sur toute la largeur de la fiche, au-dessus des deux colonnes (et des onglets au téléphone). Cachée
   tant qu'aucune liste d'origine n'est connue (palette, notification, page pleine). */
.tk-fiche { grid-template-rows: auto minmax(0, 1fr); }
.tk-fiche > .tk-gauche-cadre, .tk-fiche > .tk-discussion { grid-row: 2; }
.tk-carrousel {
  grid-column: 1 / -1; grid-row: 1; flex: none;
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(53, 208, 242, .06), rgba(10, 15, 26, .4) 30%, rgba(10, 15, 26, .4) 70%, rgba(124, 92, 255, .06));
}
.tk-carrousel[hidden] { display: none; }
.tk-car-fl {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 40%; min-height: 34px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid var(--border-lit); background: rgba(14, 20, 32, .7);
  color: var(--fg); font-size: 12.5px; text-decoration: none; transition: border-color .15s, color .15s, box-shadow .15s;
}
.tk-car-fl:hover, .tk-car-fl:focus-visible { border-color: var(--accent); color: var(--accent); text-decoration: none; box-shadow: 0 0 14px rgba(53, 208, 242, .25); outline: none; }
.tk-car-chevron { flex: none; font-size: 18px; line-height: 1; color: var(--accent); }
.tk-car-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-car-pos {
  flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tk-car-pos strong { color: var(--fg); font-family: var(--font-num); letter-spacing: 0; }
.tk-car-src { color: var(--dim); }
/* Arrivée d'un ticket voisin : il glisse du côté d'où il vient. */
.tk-fiche.tk-car-depuis-d > .tk-gauche-cadre, .tk-fiche.tk-car-depuis-d > .tk-discussion { animation: tkCarDroite .24s cubic-bezier(.2, .8, .3, 1); }
.tk-fiche.tk-car-depuis-g > .tk-gauche-cadre, .tk-fiche.tk-car-depuis-g > .tk-discussion { animation: tkCarGauche .24s cubic-bezier(.2, .8, .3, 1); }
@keyframes tkCarDroite { from { opacity: .25; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes tkCarGauche { from { opacity: .25; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tk-fiche.tk-car-depuis-d > .tk-gauche-cadre, .tk-fiche.tk-car-depuis-d > .tk-discussion,
  .tk-fiche.tk-car-depuis-g > .tk-gauche-cadre, .tk-fiche.tk-car-depuis-g > .tk-discussion { animation: none; }
}
/* Téléphone : flèches seules, cibles de 44 px ; la position garde le milieu. */
@media (max-width: 899px) {
  /* La modale d'une fiche prend tout l'écran au téléphone, comme les autres (la règle de 90 vh plus haut, faite
     pour l'ordinateur, laissait une bande vide en bas). */
  .mdl-box:has(.tk-fiche) { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
  .tk-carrousel { padding: 6px 10px; }
  .tk-car-fl { min-width: 44px; min-height: 44px; justify-content: center; padding: 4px 10px; }
  .tk-car-titre { display: none; }
  .tk-car-chevron { font-size: 22px; }
}

/* ------------------------------------------------------------- interventions modifiables */
.tk-inter-liste li { grid-template-areas: "date duree" "lib lib" "fact act" "form form"; }
.tk-inter-act { grid-area: act; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.tk-inter-act form { margin: 0; display: inline-flex; }
.tk-inter-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer;
  font: 600 14px var(--font); text-decoration: none;
}
.tk-inter-btn:hover, .tk-inter-btn:focus-visible { border-color: var(--border-lit); background: rgba(255, 255, 255, .05); color: var(--accent); text-decoration: none; outline: none; }
.tk-inter-btn[aria-expanded="true"] { border-color: rgba(53, 208, 242, .5); color: var(--accent); background: var(--accent-soft); }
.tk-inter-btn-suppr:hover, .tk-inter-btn-suppr:focus-visible { color: var(--danger); border-color: rgba(251, 95, 122, .45); }
.tk-inter-verrou { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--dim); }
.tk-inter-verrou .ic { width: 15px; height: 15px; }
.tk-inter-ligne.tk-inter-edition { background: linear-gradient(90deg, rgba(53, 208, 242, .06), transparent 70%); }
.tk-inter-form {
  grid-area: form; display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 2px; padding: 10px 12px;
  border: 1px solid var(--border-lit); border-radius: var(--radius-sm); background: var(--bg-2);
}
.tk-inter-form[hidden] { display: none; }
.tk-inter-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font-size: 11.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tk-inter-champ input { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.tk-inter-form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-inter-form-pied .btn { min-height: 38px; }
.tk-inter.tk-inter-envoi { opacity: .65; pointer-events: none; }
@media (min-width: 640px) {
  /* 136 px : jour et heure tiennent sur une ligne malgré la colonne d'actions ajoutée. */
  .tk-inter-liste li { grid-template-columns: 136px minmax(0, 1fr) auto 64px auto; grid-template-areas: "date lib fact duree act" "form form form form form"; }
  .tk-inter-form { grid-template-columns: 160px 130px minmax(0, 1fr); align-items: end; }
  .tk-inter-form-pied { grid-column: 1 / -1; }
}
/* Téléphone (une colonne) : la facturation et ✎ ✕ sur la même ligne, centrés l'un sur l'autre. */
@media (max-width: 639px) {
  .tk-inter-fact, .tk-inter-act { align-self: center; }
}
/* Téléphone : cibles de 44 px au doigt, champs de 44 px. */
@media (max-width: 767px), (hover: none) {
  .tk-inter-btn, .tk-inter-verrou { width: 44px; height: 44px; }
  .tk-inter-champ input, .tk-inter-form-pied .btn { min-height: 44px; }
}

/* ------------------------------------------------------------- ajout rapide (23/10/2026) */
/* « Départ », « Durée » et « Ajouter » (ticket/_interventions.html.twig). En flex qui passe à la ligne selon la
   largeur de la COLONNE (pas de l'écran : dans la modale du bureau, la colonne du ticket est étroite) : une ligne
   quand ça tient ; sinon le départ sur toute la largeur, la durée et le bouton dessous. Au doigt : 44 px, et 16 px
   de texte dans les champs (Safari iOS zoome sur un champ plus petit). */
.tk-inter-ajout {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 0 0 10px; padding: 10px 12px;
  border: 1px dashed var(--border-lit); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .015);
}
.tk-inter-ajout-depart { flex: 1 1 200px; }
.tk-inter-ajout-duree { flex: 1 1 110px; max-width: 220px; }
.tk-inter-ajout-btn { flex: 0 0 auto; min-height: 42px; }
.tk-inter-ajout input[type=datetime-local] {
  width: 100%; min-width: 0; box-sizing: border-box; background: var(--bg-2); color: var(--fg); color-scheme: dark;
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; font: 400 13.5px var(--font); line-height: 1.45; outline: none;
}
.tk-inter-ajout input[type=datetime-local]:focus { border-color: var(--accent); box-shadow: var(--glow); }
.tk-inter-ajout input[name="duree"] { font-family: var(--font-num); letter-spacing: .03em; }
.tk-inter-ajout-msg { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--danger); overflow-wrap: anywhere; }
.tk-inter-ajout-msg[hidden] { display: none; }
.tk-inter.tk-inter-envoi .tk-inter-ajout-btn { cursor: progress; }
/* La ligne qui vient d'être ajoutée s'allume puis s'éteint. */
.tk-inter-ligne.tk-inter-neuve { animation: tkInterNeuve 2.4s ease-out; }
@keyframes tkInterNeuve { from { background-color: rgba(52, 211, 153, .2); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .tk-inter-ligne.tk-inter-neuve { animation: none; } }
@media (max-width: 767px), (hover: none) {
  .tk-inter-ajout input, .tk-inter-ajout input[type=datetime-local] { min-height: 44px; font-size: 16px; }
  .tk-inter-ajout-btn { min-height: 44px; }
  .tk-inter-ajout-duree { max-width: none; }
}

/* Avis des interventions (« Saisie modifiée… », refus) : bandeau posé en bas de la colonne, hors de la partie
   que le direct rafraîchit. */
.tk-avis {
  position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 16px; margin: 0;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.tk-avis[hidden] { display: none; }
.tk-avis .flash { margin: 0; pointer-events: auto; box-shadow: var(--lift); background-color: rgba(10, 15, 26, .96); }

/* N° du ticket à gauche du titre (21/10/2026) : discret, chiffres à chasse fixe. */
.tk-num { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ============================================================================
   SOUS-TICKETS, 23/10/2026 (Franck : « je peux drag and drop un ticket dans un autre ticket, créant une
   arborescence de ticket sur 2 niveaux, et dans le ticket parent je vois des extraits / liens des tickets enfants.
   Et il faut pouvoir lancer le chrono dans chacun des sous-tickets depuis le ticket parent. »)
   ============================================================================ */

/* Carte : « ↳ #8 » (lien vers le parent) ou « 3 sous-tickets · 1 fini », une ligne courte sous le titre. Le lien passe
   au-dessus du lien étiré de la carte (z-index 2), comme les actions. */
.tk-arbo { margin: -3px 0 0; min-width: 0; font-size: 11px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-encart .tk-arbo { margin-top: -1px; font-size: 10.5px; }
.tk-arbo-lien { position: relative; z-index: 2; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-arbo-lien:hover { text-decoration: underline; }
.tk-arbo-parent { display: inline-block; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(53, 208, 242, .35); color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .tk-arbo-lien { display: inline-flex; align-items: center; min-height: 32px; } }

/* Glisser : la carte VISÉE s'éclaire nettement et dit ce qui va se passer ; en pointillés rouges si c'est impossible.
   Le repère d'insertion est caché tant qu'on vise une carte ; la carte glissée s'efface un peu. */
.tk-card.tk-cible-parent { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(53, 208, 242, .18), 0 10px 28px rgba(0, 0, 0, .45); }
.tk-card.tk-cible-refus { border-color: var(--danger); border-style: dashed; box-shadow: 0 0 0 1px rgba(251, 95, 122, .5); }
.tk-card.tk-cible-envoi { opacity: .7; cursor: progress; }
.tk-cible-bulle {
  position: absolute; z-index: 25; left: 8px; right: 8px; bottom: 8px; pointer-events: none;
  padding: 6px 8px; border-radius: 8px; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.3;
  background: var(--accent); color: #07101f; box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.tk-cible-refus .tk-cible-bulle { background: var(--danger); color: #fff; }
.tk-card.tk-glisse.tk-sur-carte { opacity: .6; }
.tk-groupes.tk-sur-carte .tk-groupe.tk-groupe-cible .tk-groupe-titre { color: inherit; }
.tk-ordre-msg.success { white-space: normal; }

/* Fiche d'un ENFANT : « Sous-ticket de #8 — titre » et « Détacher », sous l'en-tête. */
.st-de { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -6px 0 14px; padding: 8px 12px; min-width: 0;
  border: 1px solid rgba(53, 208, 242, .3); border-radius: 10px; background: rgba(53, 208, 242, .05); font-size: 13px; }
.st-de-txt { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.st-de-lien { color: var(--fg); font-weight: 600; }
.st-de-lien:hover { color: var(--accent); }
.st-num { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.st-form { margin: 0; }

/* « + Sous-ticket » d'un ticket SEUL : discret, un lien texte qui ouvre son panneau. */
.st-ajout { margin: -6px 0 14px; min-width: 0; }
.st-ajout > summary { list-style: none; cursor: pointer; }
.st-ajout > summary::-webkit-details-marker { display: none; }
.st-ajout-lien { display: inline-flex; align-items: center; min-height: 30px; font-size: 12.5px; color: var(--muted); border-radius: 6px; }
.st-ajout-lien:hover, .st-ajout[open] > .st-ajout-lien { color: var(--accent); }
.st-ajout-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-pan { margin-top: 6px; padding: 12px; min-width: 0; border: 1px solid var(--border-lit); border-radius: 10px; background: var(--bg-2); }
.st-pan-titre { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.st-pan-titre:not(:first-child) { margin-top: 14px; }
.st-aide { margin: 6px 0 0; }
.st-choix { margin: 0; min-width: 0; }
.st-cherche { width: 100%; box-sizing: border-box; margin: 0 0 6px; }
.st-cherche[hidden] { display: none; }
.st-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.st-cand[hidden] { display: none; }
.st-cand-btn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; width: 100%; min-height: 40px; padding: 6px 10px; text-align: left;
  font: inherit; font-size: 13px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.st-cand-btn:hover, .st-cand-btn:focus-visible { border-color: var(--accent); outline: none; }
.st-cand-titre { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.st-cand-info { flex: 1 1 100%; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.st-plus, .st-vide { margin: 6px 0 0; }
.st-plus[hidden], .st-vide[hidden] { display: none; }
.st-nouveau { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.st-nouveau input[type=text] { flex: 1 1 200px; min-width: 0; }

/* Encart « Sous-tickets » du PARENT : une ligne par enfant (liseré de sa priorité), extrait sur deux lignes, chrono et
   « Détacher » au bout. */
.st-encart h2 { display: flex; align-items: baseline; gap: 8px; }
.st-nb { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-ligne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-width: 0;
  padding: 9px 12px 9px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-2); }
.st-ligne::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.st-ligne.p3::before { background: var(--danger); }
.st-ligne.p2::before { background: var(--warn); }
.st-ligne.st-en-cours { border-color: var(--success); box-shadow: 0 0 0 1px rgba(52, 211, 153, .35); }
.st-ligne.st-en-cours::before { background: var(--success); }
.st-lien { grid-column: 1; min-width: 0; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.st-lien:hover { color: var(--accent); }
.st-infos { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; }
.st-temps { color: var(--muted); font-family: var(--font-num); white-space: nowrap; }
.st-extrait { grid-column: 1; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-actions { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.st-actions form { margin: 0; }
.st-actions .btn { width: 100%; white-space: nowrap; }
.st-bas { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.st-bas .st-ajout { margin: 0; flex: 1 1 100%; }
.st-bas .st-ajout:not([open]) { flex: 0 1 auto; }

/* Téléphone : l'enfant sur toute la largeur, ses boutons dessous, côte à côte ; cibles de 44 px au doigt. */
@media (max-width: 767px) {
  .st-ligne { grid-template-columns: minmax(0, 1fr); }
  .st-actions { grid-column: 1; grid-row: auto; flex-direction: row; }
  .st-actions form { flex: 1 1 0; }
  .st-actions .btn, .st-de .btn, .st-nouveau .btn { min-height: 44px; }
  .st-ajout-lien { min-height: 44px; }
  .st-cand-btn { min-height: 44px; }
  .st-cherche, .st-nouveau input[type=text] { min-height: 44px; font-size: 16px; }
}

/* NUMÉRO DU TICKET SUR LA CARTE (Franck, 27/10/2026) : celui de la boutique, à gauche du nom de la boutique, discret et
   à chasse fixe ; il ne rétrécit jamais (c'est le nom de la boutique qui s'abrège). */
.tk-head-num { flex: none; color: var(--muted); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 10.5px; }
.tk-head .tk-site { min-width: 0; }

/* TABLETTE AU DOIGT (iPad, 31/10/2026) : discussion de la fiche ticket. Les tailles du
   téléphone (bloc < 900 px), sans ses onglets : la mise en page reste celle de l'ordinateur. */
@media (pointer: coarse) {
  .dc-outils button { min-width: 40px; height: 40px; }
  .dc-puce-x { width: 32px; height: 32px; }
  .dc-envoyer { min-height: 44px; }
  .dc-sugg li { min-height: 44px; display: flex; align-items: center; }
}
/* PAGES de la liste des tickets (01/11/2026) : « ‹ 500 précédents · Page 2 sur 2 · 380 suivants › ». */
.tk-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
/* Liens « ‹ précédents · suivants › » du compteur du haut : au doigt, une vraie cible (44 px), comme le lot iPad. */
@media (pointer: coarse) { .tk-pages-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; } }