/* Oqora CRM · page Tâches comme GHL (25/10/2026, .tq-*). Tête « Tâches » + pastille + [+ Ajouter une tâche], onglets
   soulignés, filtres en pastilles bordées, tableau blanc à lignes fines (44 px), rond à cocher (vert quand c'est fait),
   échéance rouge si passée, pied « Page 1 sur N ». Calqué sur Contacts (css/sections/contacts.css). Règles préfixées
   par .s-taches (la page) ou .tq- (panneaux) ; jetons de crm.css, :root jamais touché. */

.s-taches{ display:block; min-width:0; }
.s-taches .tq{ --tq-trait:var(--rule); --tq-trait-fort:var(--rule-strong, #c4cad0); --tq-fond:var(--bande);
  display:flex; flex-direction:column; gap:12px; min-width:0; color:var(--ink); font-size:14px;
  margin:0 calc(16px - var(--gutter, 24px)); }
.s-taches .tq p{ margin:0; }
.s-taches .tq svg{ width:15px; height:15px; flex:none; }

/* ---------------------------------------------------------------- tête */
.s-taches .tq-tete{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.s-taches .tq-titre-page{ margin:0; font-size:20px; font-weight:600; color:var(--ink); line-height:1.2; }
.s-taches .tq-pastille{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:12px;
  background:var(--bleu-tint); color:var(--bleu-dark); font-size:12.5px; font-weight:500; white-space:nowrap; }
.s-taches .tq-pastille:empty{ display:none; }
.s-taches .tq-espace{ flex:1; }
.s-taches .tq-b{ min-height:32px; height:32px; padding:0 12px; gap:6px; border-radius:6px; font-size:13px; font-weight:500;
  background:var(--surface); color:var(--ink); border:1px solid var(--tq-trait-fort); box-shadow:none; }
.s-taches .tq-b:hover{ background:var(--tq-fond); color:var(--ink); box-shadow:none; }
.s-taches .tq-b--principal{ background:var(--ink); border-color:var(--ink); color:#fff; }
.s-taches .tq-b--principal:hover{ background:#2b3440; border-color:#2b3440; color:#fff; }
.s-taches .tq-b[disabled]{ opacity:.5; }

/* ---------------------------------------------------------------- onglets, filtres, recherche */
.s-taches .tq-onglets{ display:flex; gap:22px; border-bottom:1px solid var(--tq-trait); overflow-x:auto; }
.s-taches .tq-onglet{ height:40px; padding:0; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer;
  font:500 14px/1 var(--font); color:var(--ink-soft); white-space:nowrap; }
.s-taches .tq-onglet:hover{ color:var(--ink); }
.s-taches .tq-onglet[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--bleu); }
.s-taches .tq-barre{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.s-taches .tq-filtre{ position:relative; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 10px;
  border:1px solid var(--tq-trait-fort); border-radius:6px; background:var(--surface); font-size:13px; color:var(--ink);
  white-space:nowrap; cursor:pointer; max-width:280px; }
.s-taches .tq-filtre:hover{ background:var(--tq-fond); }
.s-taches .tq-filtre:focus-within{ border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-ring); }
.s-taches .tq-filtre svg{ color:var(--ink-soft); }
.s-taches .tq-filtre-texte{ overflow:hidden; text-overflow:ellipsis; }
/* Le menu natif couvre toute la pastille : un clic l'ouvre, le clavier aussi. */
.s-taches .tq-filtre-menu{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); opacity:0; cursor:pointer; font-size:14px; }
.s-taches .tq-chercher-zone{ position:relative; display:inline-flex; align-items:center; }
.s-taches .tq-chercher-zone svg{ position:absolute; left:10px; color:var(--ink-faint); pointer-events:none; }
.s-taches .tq-champ{ height:32px; min-height:32px; padding:0 10px 0 32px; border:1px solid var(--tq-trait-fort); border-radius:6px;
  background:var(--surface); color:var(--ink); font:400 13.5px/1 var(--font); box-shadow:none; }
.s-taches .tq-champ:focus{ outline:0; border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-ring); }
.s-taches .tq-chercher{ width:260px; }
.s-taches .tq-avertir{ align-self:flex-start; white-space:normal; line-height:1.4; }

/* ---------------------------------------------------------------- tableau */
/* Le cadre blanc : le tableau défile dedans, le pied « Page 1 sur N » reste visible en bas (comme GHL). */
.s-taches .tq-cadre{ background:var(--surface); border:1px solid var(--tq-trait); border-radius:8px; overflow:hidden; }
/* position:relative : les libellés cachés des crayons (position absolue) restent dans la zone qui défile ; sans elle ils
   élargissaient la page du téléphone à 965 px (vu le 25/10, le clic sur « 20 par page » tombait à côté). */
.s-taches .tq-tableau-zone{ position:relative; overflow:auto; min-height:120px; max-height:calc(100vh - 330px); }
.s-taches .tq-tableau{ width:100%; min-width:980px; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:13px; }
.s-taches .tq-col-statut{ width:64px; } .s-taches .tq-col-description{ width:22%; } .s-taches .tq-col-contact{ width:17%; }
.s-taches .tq-col-responsable{ width:12%; } .s-taches .tq-col-echeance{ width:168px; } .s-taches .tq-col-actions{ width:76px; }
.s-taches .tq-tableau th{ position:sticky; top:0; z-index:2; height:38px; padding:0 12px; text-align:left;
  font:500 12.5px/1.2 var(--font); color:var(--ink-soft); background:var(--tq-fond); border-bottom:1px solid var(--tq-trait); }
.s-taches .tq-tableau td{ height:44px; padding:0 12px; border-bottom:1px solid var(--rule-soft); vertical-align:middle;
  white-space:nowrap; overflow:hidden; }
.s-taches .tq-tableau tbody tr:last-child td{ border-bottom:0; }
.s-taches .tq-tableau tbody tr:hover td{ background:#f8f9fb; }
.s-taches .tq-th--statut, .s-taches .tq-td--statut{ text-align:center; padding:0 8px; }
.s-taches .tq-th--actions, .s-taches .tq-td--actions{ text-align:center; }
/* « Échéance » trie (comme GHL) : le libellé et sa flèche forment un bouton discret. */
.s-taches .tq-th-tri{ display:inline-flex; align-items:center; gap:4px; height:32px; padding:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer; }
.s-taches .tq-th-tri:hover{ color:var(--ink); }
.s-taches .tq-th-tri:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--bleu-ring); border-radius:4px; }
.s-taches .tq-th-sens{ width:10px; }
.s-taches .tq-coupe{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.s-taches .tq-td--titre{ display:table-cell; }
.s-taches .tq-titre{ max-width:calc(100% - 22px); font-weight:500; color:var(--ink); }
.s-taches .tq-auto{ display:inline-flex; vertical-align:middle; margin-left:6px; color:var(--ink-faint); }
.s-taches .tq-auto svg{ width:13px; height:13px; }
.s-taches .tq-faible{ color:var(--ink-soft); }
/* Le rond « Statut » de GHL : gris bordé à faire, plein vert quand c'est fait. */
.s-taches .tq-rond{ display:inline-grid; place-items:center; width:24px; height:24px; padding:0; border-radius:50%;
  border:1.5px solid #9aa3ad; background:var(--surface); color:transparent; cursor:pointer; transition:background .12s, border-color .12s; }
.s-taches .tq-rond svg{ width:13px; height:13px; stroke-width:2.6; }
.s-taches .tq-rond:hover{ border-color:var(--vert); color:var(--vert); }
.s-taches .tq-rond--fait{ background:var(--vert); border-color:var(--vert); color:#fff; }
.s-taches .tq-rond--fait:hover{ background:var(--vert); color:#fff; opacity:.85; }
.s-taches .tq-rond[disabled]{ cursor:not-allowed; opacity:.45; }
.s-taches .tq-rond:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--bleu-ring); }
.s-taches .tq-ligne--faite .tq-titre{ color:var(--ink-soft); }
.s-taches .tq-contact{ display:inline-flex; align-items:center; gap:8px; max-width:100%; border:0; background:none; padding:0;
  cursor:pointer; color:var(--ink); text-align:left; font:inherit; }
.s-taches .tq-contact:hover .tq-contact-nom{ text-decoration:underline; text-underline-offset:3px; }
.s-taches .tq-contact-nom{ min-width:0; }
.s-taches .tq-avatar{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--bleu-tint); color:var(--bleu-dark); font-size:11px; font-weight:600; }
.s-taches .tq-avatar--resp{ background:#e3f2f7; color:#1f6b82; }
.s-taches .tq-resp{ display:inline-flex; align-items:center; gap:8px; max-width:100%; color:var(--ink-soft); }
.s-taches .tq-ech{ font-variant-numeric:tabular-nums; color:var(--ink); }
.s-taches .tq-ech--retard{ color:var(--rouge); font-weight:500; }
.s-taches .tq-ech--aujourdhui{ color:var(--ambre); font-weight:500; }
.s-taches .tq-icone{ width:32px; min-width:32px; height:32px; min-height:32px; padding:0; border:0; border-radius:6px;
  background:none; color:var(--ink-soft); box-shadow:none; justify-content:center; }
.s-taches .tq-icone span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.s-taches .tq-icone:hover{ background:var(--tq-fond); color:var(--ink); box-shadow:none; }
.s-taches .tq-icone[disabled]{ opacity:.4; }
.s-taches .tq-vide{ padding:40px 16px; text-align:center; }

/* ---------------------------------------------------------------- pied : pages */
.s-taches .tq-pied{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--tq-trait);
  font-size:13px; color:var(--ink-soft); }
.s-taches .tq-page{ font-variant-numeric:tabular-nums; }
.s-taches .tq-par-page{ height:32px; }
.s-taches .tq-page-num{ display:inline-grid; place-items:center; min-width:32px; height:32px; padding:0 8px; border-radius:6px;
  border:1px solid var(--bleu); color:var(--bleu); font-weight:500; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- panneaux : « Nouvelle tâche », « Modifier la tâche » */
/* Panneau « Nouvelle tâche » : les champs gardent leur hauteur (la base de 160 px des champs de la fiche, pensée pour
   les rangées, ne s'applique pas à une colonne). */
.s-fiche.tq-panneau > .sf-champ{ flex:none; }
.sf-panneau .tq-resultats{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.sf-panneau .tq-resultat{ width:100%; text-align:left; border:0; background:var(--surface-2); border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-3); min-height:var(--tap); display:flex; flex-direction:column; gap:2px; cursor:pointer;
  color:var(--ink); font:inherit; }
.sf-panneau .tq-resultat:hover, .sf-panneau .tq-resultat:focus-visible{ box-shadow:inset 0 0 0 1px var(--bleu); }
.sf-panneau .tq-resultat-nom{ font-weight:var(--fw-moyen); }
.sf-panneau .tq-resultat .faint{ font-size:var(--fs-xs); }
.sf-panneau .tq-choisie{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
/* « Modifier la tâche » (page Tâches) : le formulaire de la fiche (.fc-form) hors de la page fiche ; la hauteur et les
   marges de la page fiche ne s'appliquent pas, le titre est celui du panneau. */
.tq-fc.fc{ height:auto; min-height:0; margin:0; }
.tq-fc .fc-form{ border:0; padding:0; background:none; }
.tq-fc .fc-form-titre{ display:none; }

/* ---------------------------------------------------------------- téléphone : 44 px pour chaque bouton */
@media (max-width: 899px){
  .s-taches .tq-b, .s-taches .tq-champ, .s-taches .tq-filtre{ min-height:44px; height:44px; }
  .s-taches .tq-th-tri{ min-height:44px; height:44px; }
  /* Pied : « Page 1 sur 2 » et le nombre par page sur une ligne, Précédent · 1 · Suivant sur la suivante. */
  .s-taches .tq-pied{ flex-wrap:wrap; row-gap:8px; }
  .s-taches .tq-page{ white-space:nowrap; }
  .s-taches .tq-pied > .tq-espace{ flex:1 1 auto; }
  .s-taches .tq-par-page{ height:44px; }
  .s-taches .tq-onglet{ min-height:44px; height:44px; }
  .s-taches .tq-chercher-zone, .s-taches .tq-chercher{ width:100%; flex-basis:100%; }
  .s-taches .tq-rond{ width:44px; height:44px; }
  .s-taches .tq-icone{ width:44px; min-width:44px; height:44px; min-height:44px; }
  .s-taches .tq-contact{ min-height:44px; }
  .s-taches .tq-tableau td{ height:52px; }
  .s-taches .tq-tableau-zone{ max-height:none; }
  .s-taches .tq-col-statut{ width:68px; } .s-taches .tq-col-actions{ width:68px; }
}