/* Elevora CRM — css/tickets.css  [V33] 13/10/2026 (document 2 de Célian, §33 « Tickets »)
   La page Tickets de l'espace client (client.html, ids tk-…) et celle de l'équipe (index.html : la page Tickets et l'onglet de la fiche client,
   classes tkq-…). Le fil de réponses est celui de la messagerie (css/messagerie.css : .msg-journal, .msg-saisie, .msg-chips…) : il n'est pas redéfini ici.
   Jetons de couleur seulement (mode jour et nuit), pastilles de statut .badge .b-* de la charte, aucun trait de couleur sur le côté d'un bloc,
   aucune taille de texte sous --fs-min (css/commun.css). Mouvement réduit respecté. */

/* ══ L'espace client ══ */
.tk-page{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start}
.tk-page .card{margin-bottom:0}
.tk-liste-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tk-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(70vh,680px);overflow-y:auto;overscroll-behavior:contain}
.tk-item{width:100%;text-align:left;display:flex;flex-direction:column;gap:5px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;color:var(--text);font:inherit;font-size:13px;cursor:pointer;min-height:44px}
.tk-item:hover{border-color:var(--border2)}
.tk-item[aria-current="true"]{background:var(--glow);border-color:var(--accent)}
.tk-item-l1{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.tk-num{font-variant-numeric:tabular-nums;color:var(--text2);font-size:var(--fs-min);font-weight:700}
.tk-sujet{font-weight:600;overflow-wrap:anywhere;line-height:1.4}
.tk-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;color:var(--text2);font-size:var(--fs-min)}
.tk-nouveau-pt{background:var(--red-fill);color:#fff;font-size:var(--fs-min);font-weight:700;border-radius:10px;padding:0 8px;line-height:1.6;white-space:nowrap}
.tk-vide{padding:1.6rem 1rem;text-align:center;color:var(--text2);font-size:13px}
.tk-vide strong{display:block;color:var(--text);font-size:14px;margin-bottom:4px}

.tk-detail-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tk-detail-titre{margin:0;font-size:16px;font-weight:700;overflow-wrap:anywhere;flex:1 1 240px}
.tk-detail-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 14px;color:var(--text2);font-size:13px}
.tk-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tk-ferme-note{margin:0 0 12px;padding:10px 12px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--border);font-size:13.5px;line-height:1.5}

/* Formulaire de création */
.tk-form{display:flex;flex-direction:column;gap:14px}
.tk-champ{display:flex;flex-direction:column;gap:5px;border:0;margin:0;padding:0;min-width:0}
.tk-champ>legend,.tk-champ>label{font-size:13px;font-weight:600;padding:0;margin-bottom:2px}
.tk-aide{margin:0;font-size:var(--fs-min);color:var(--text2);line-height:1.5}
.tk-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.tk-radio{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg3);cursor:pointer;min-height:44px}
.tk-radio:hover{border-color:var(--accent)}
.tk-radio:has(input:checked){border-color:var(--accent);background:var(--glow)}
.tk-radio:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.tk-radio input{margin-top:3px;flex:0 0 auto}
.tk-radio span{display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:600;line-height:1.35}
.tk-radio small{font-size:var(--fs-min);font-weight:400;color:var(--text2)}
.tk-form textarea{min-height:120px;resize:vertical;line-height:1.5}
.tk-depot{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1.5px dashed var(--border-input);border-radius:var(--r);padding:14px;background:var(--bg3);min-height:64px}
@media (prefers-reduced-motion:no-preference){.tk-depot{transition:border-color .15s ease,background-color .15s ease}}
.tk-depot.tk-survol{border-color:var(--accent);background:var(--glow)}
.tk-depot-txt{margin:0;font-size:13.5px;color:var(--text2);line-height:1.5;flex:1 1 200px}
.tk-form-barre{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tk-err{margin:0;color:var(--red);font-size:13px;min-height:0}
.tk-err:empty{display:none}

@media (max-width:900px){
  .tk-page{grid-template-columns:minmax(0,1fr)}
  .tk-page[data-vue="liste"] .tk-carte-droite{display:none}
  .tk-page:not([data-vue="liste"]) .tk-carte-liste{display:none}
  .tk-retour{display:inline-flex}
}
.tk-retour{display:none}
@media (pointer:coarse){.tk-radio,.tk-item,.tk-depot .btn,.tk-form-barre .btn{min-height:44px}}

/* ══ L'espace client : la Vue d'ensemble après la livraison ══ */
.tk-livre{display:flex;flex-direction:column;gap:10px}
.tk-livre p{margin:0;font-size:14px;line-height:1.55;color:var(--text2)}
.tk-livre-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ══ La page Tickets de l'équipe ══ */
.tkq-page{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:16px;align-items:start}
.tkq-carte{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1rem 1.15rem;min-width:0}
.tkq-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:flex-end}
.tkq-filtres label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-min);color:var(--text2)}
.tkq-filtres .fi,.tkq-filtres select{min-width:130px}
.tkq-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(70vh,700px);overflow-y:auto;overscroll-behavior:contain}
.tkq-vide{padding:2.2rem 1rem;text-align:center;color:var(--text2);font-size:13px}
.tkq-vide strong{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.tkq-prio{display:inline-flex;align-items:center;border-radius:999px;padding:0 9px;font-weight:600;font-size:var(--fs-min);line-height:1.6;white-space:nowrap;background:var(--bg4);color:var(--text)}
.tkq-prio[data-p="haute"],.tkq-prio[data-p="urgente"]{background:var(--amber-bg);color:var(--amber)}
.tkq-prio[data-p="urgente"]{background:var(--red-fill);color:#fff}
.tkq-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tkq-titre{margin:0;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.tkq-sous{margin:2px 0 0;font-size:var(--fs-min);color:var(--text2)}
.tkq-reglages{display:flex;gap:10px 14px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg3)}
.tkq-reglages label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-min);color:var(--text2);min-width:150px}
.tkq-liens{display:flex;gap:8px;flex-wrap:wrap}
.tkq-retour{display:none}
@media (max-width:900px){
  .tkq-page{grid-template-columns:minmax(0,1fr)}
  .tkq-page[data-vue="conversation"] .tkq-carte--liste{display:none}
  .tkq-page[data-vue="liste"] .tkq-carte--conv{display:none}
  .tkq-retour{display:inline-flex}
}

/* Pastille « Fermé » : neutre (les autres statuts utilisent les pastilles .badge .b-* de la charte) */
.badge.b-f{background:var(--bg4);color:var(--text2)}.badge.b-f::before{background:var(--text2)}
.badge.b-t{background:var(--glow);color:var(--text)}.badge.b-t::before{background:var(--accent)}