/* Oqora CRM · Tâche journalière, Appels, Rendez-vous, Messages (04/10/2026). Règles préfixées .s-tb.
   25/10/2026 : style commun (docs/sortie-ghl/audit-visuel.md § 3) : bandeau du jour sur une ligne, tuiles alignées sur
   4 colonnes, listes en vrai tableau (lignes fines dans un cadre), texte d'une seule couleur, retard dit par un badge
   rouge clair, un seul bouton principal par zone. */
.s-tb .tb{ display:flex; flex-direction:column; gap:var(--sp-6); }
.s-tb .tb-tete{ background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-5);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); }
.s-tb .tb-jour{ margin:0; font-size:var(--fs-16); font-weight:var(--fw-fort); color:#fff; white-space:nowrap; }
.s-tb .tb-progres{ margin:0; color:var(--navy-texte); font-size:var(--fs-14); font-weight:var(--fw-moyen); white-space:nowrap; }
.s-tb .tb-barre{ flex:1 1 200px; height:6px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; }
.s-tb .tb-barre-rempli{ display:block; height:100%; background:var(--vert); border-radius:3px; }

/* Tuiles : chacune mène à sa page (un lien entier, donc une grande cible) ; 4 colonnes alignées sur ordinateur */
.s-tb .tb-tuiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--sp-3); }
@media (min-width:900px){ .s-tb .tb-tuiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.s-tb .tb-tuile{ display:flex; flex-direction:column; gap:4px; min-width:0; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:var(--sp-4); text-decoration:none; color:inherit; }
.s-tb a.tb-tuile:hover{ border-color:var(--bleu); }
.s-tb a.tb-tuile:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; border-color:var(--bleu); }
.s-tb .tb-tuile-titre{ margin:0; color:var(--ink-soft); font-size:var(--fs-13); font-weight:var(--fw-moyen); }
.s-tb .tb-tuile-val{ margin:0; font-size:var(--fs-24); font-weight:var(--fw-fort); line-height:1.2; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.s-tb .tb-tuile-plus{ margin:0; color:var(--ink-soft); font-size:var(--fs-13); }
.s-tb .tb-tuile-retard{ align-self:flex-start; margin:4px 0 0; padding:2px 6px; border-radius:var(--r-sm); background:var(--rouge-tint);
  color:var(--rouge); font-weight:var(--fw-moyen); font-size:var(--fs-12); }
.s-tb .tb-tuiles--petites .tb-tuile-val{ font-size:var(--fs-20); }

/* Listes : un titre de bloc, puis un tableau (cadre fin, une ligne par chose à faire) */
.s-tb .tb-h2{ margin:0 0 var(--sp-2); font-size:var(--fs-16); font-weight:var(--fw-fort); color:var(--ink);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }
.s-tb .tb-nb{ display:inline-flex; align-items:center; min-height:20px; padding:0 6px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink-soft); font-size:var(--fs-12); font-weight:var(--fw-moyen); font-variant-numeric:tabular-nums; }
/* Le compteur des retards : badge rouge clair (rouge sur rouge clair : 4,55:1), jamais rouge plein ni titre rouge */
.s-tb .tb-bloc--retard .tb-nb{ background:var(--rouge-tint); color:var(--rouge); }
/* Ambre foncé : #8f4e00 sur le fond ambre clair = 5,8:1 (var(--ambre) y fait 4,5:1 tout juste) */
.s-tb .tb-bloc--regler .tb-nb{ background:var(--ambre-tint); color:#8f4e00; }
.s-tb .tb-fait-titre{ cursor:pointer; list-style:none; margin:0; min-height:var(--ctrl-h); }
.s-tb .tb-fait-titre::-webkit-details-marker{ display:none; }
.s-tb .tb-fait-titre::before{ content:"▸"; display:inline-block; transition:transform .15s; color:var(--ink-faint); }
.s-tb details[open] > .tb-fait-titre{ margin-bottom:var(--sp-2); }
.s-tb details[open] > .tb-fait-titre::before{ transform:rotate(90deg); }
.s-tb .tb-h2:focus{ outline:none; }
.s-tb .tb-h2:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; border-radius:var(--r-sm); }
.s-tb .tb-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; }
.s-tb .tb-ligne{ display:flex; align-items:center; gap:var(--sp-3); background:var(--surface); min-height:56px;
  padding:var(--sp-2) var(--sp-4); border-bottom:1px solid var(--rule-soft); }
.s-tb .tb-ligne:last-child{ border-bottom:0; }
.s-tb .tb-ligne:hover{ background:var(--hover); }
.s-tb .tb-corps{ flex:1; min-width:0; }
.s-tb .tb-titre{ margin:0; font-weight:var(--fw-moyen); overflow-wrap:anywhere; }
.s-tb .tb-detail{ margin:2px 0 0; color:var(--ink-soft); font-size:var(--fs-13); overflow-wrap:anywhere; }
.s-tb .tb-retard{ display:inline-block; margin-left:4px; padding:1px 6px; border-radius:var(--r-sm); background:var(--rouge-tint);
  color:var(--rouge); font-size:var(--fs-12); font-weight:var(--fw-moyen); vertical-align:middle; max-width:100%; }
/* Appels : colonnes Personne · Étape du pipeline · actions, alignées d'une ligne à l'autre (26/10/2026) */
.s-tb .tb-entete{ display:none; }
.s-tb .tb-col-etape{ min-width:0; }
.s-tb .tb-col-etape:empty{ display:none; }
@media (min-width:900px){
  .s-tb .tb-liste--colonnes .tb-ligne, .s-tb .tb-entete{ display:grid; grid-template-columns:minmax(0,1fr) 260px 170px;
    align-items:center; gap:var(--sp-3); }
  .s-tb .tb-entete{ padding:var(--sp-2) var(--sp-4); background:var(--page); border-bottom:1px solid var(--rule);
    color:var(--ink-soft); font-size:var(--fs-12); font-weight:var(--fw-moyen); }
  .s-tb .tb-col-etape:empty{ display:block; }
}
.s-tb .tb-etape{ display:inline-block; padding:1px 6px; border-radius:var(--r-sm); background:var(--bleu-tint);
  color:var(--bleu-hover); font-size:var(--fs-12); font-weight:var(--fw-moyen); vertical-align:middle; max-width:100%; }
.s-tb .tb-heure{ display:inline-block; margin-right:2px; padding:1px 6px; border-radius:var(--r-sm); background:var(--bleu-tint);
  color:var(--bleu-hover); font-size:var(--fs-13); font-weight:var(--fw-fort); vertical-align:middle; font-variant-numeric:tabular-nums; }
/* Ligne faite : atténuée par la couleur, jamais par l'opacité (le texte gardait 3,1:1 seulement) */
.s-tb .tb-ligne--fait{ background:var(--page); }
.s-tb .tb-ligne--fait .tb-titre{ text-decoration:line-through; color:var(--ink-soft); }
.s-tb .tb-ligne--fait .tb-detail{ color:var(--ink-soft); }
/* Sa tâche GHL : fermée aussi, en cours, ou pourquoi elle ne l'a pas été (ambre, comme une lecture qui a échoué) */
.s-tb .tb-ghl{ margin:2px 0 0; color:var(--ink-soft); font-size:var(--fs-13); overflow-wrap:anywhere; }
.s-tb .tb-ghl--erreur{ color:#8f4e00; font-weight:var(--fw-moyen); }
.s-tb .tb-vide{ color:var(--ink-soft); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--sp-4); font-size:var(--fs-14); }
/* À faire maintenant : la seule ligne mise en avant, par son cadre bleu (un seul signe) */
.s-tb .tb-bloc--maintenant .tb-liste{ border-color:var(--bleu); }
/* Petit texte posé sur le fond de la page : --ink-soft (6,6:1) ; --ink-faint y était trop pâle */
.s-tb .tb-note{ margin:0; color:var(--ink-soft); font-size:var(--fs-12); }
/* Une lecture qui a échoué (tâches GHL, notes, lignes validées) : dit, jamais caché */
.s-tb .tb-alerte{ margin:0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--ambre-tint); color:#8f4e00;
  font-size:var(--fs-13); font-weight:var(--fw-moyen); overflow-wrap:anywhere; }
.s-tb .tb-bloc .tb-alerte{ margin-bottom:var(--sp-2); }

/* Boutons (25/10/2026 : plus aucun lien vers GHL) : [Appeler] (téléphone du CRM), [Répondre], [Voir la fiche], « Voir »
   (un écran du CRM), « ✓ » / « ↺ ». Dans une liste, l'action est un bouton secondaire ; seule la ligne de « À faire
   maintenant » garde le bouton principal bleu. */
.s-tb .tb-actions{ display:flex; gap:var(--sp-2); flex:none; justify-content:flex-end; }
.s-tb .tb-actions .btn{ min-height:var(--ctrl-h-sm); }
.s-tb .tb-ouvrir{ min-width:80px; justify-content:center; text-decoration:none; }
.s-tb .tb-liste .tb-ouvrir.btn--primary{ background:var(--surface); color:var(--ink); border-color:var(--rule-strong); }
.s-tb .tb-liste .tb-ouvrir.btn--primary:hover{ background:var(--hover); }
.s-tb .tb-bloc--maintenant .tb-ouvrir.btn--primary{ background:var(--bleu); color:#fff; border-color:var(--bleu); }
.s-tb .tb-bloc--maintenant .tb-ouvrir.btn--primary:hover{ background:var(--bleu-hover); border-color:var(--bleu-hover); }
.s-tb .tb-rejoindre{ justify-content:center; text-decoration:none; }
.s-tb .tb-action{ min-width:80px; justify-content:center; gap:6px; }
.s-tb .tb-action svg{ width:15px; height:15px; flex:none; }
.s-tb .tb-liste .tb-action.btn--primary{ background:var(--surface); color:var(--ink); border-color:var(--rule-strong); }
.s-tb .tb-liste .tb-action.btn--primary:hover{ background:var(--hover); }
.s-tb .tb-liste .tb-appeler svg{ color:var(--vert); }
.s-tb .tb-bloc--maintenant .tb-action.btn--primary{ background:var(--bleu); color:#fff; border-color:var(--bleu); }
.s-tb .tb-bloc--maintenant .tb-action.btn--primary:hover{ background:var(--bleu-hover); border-color:var(--bleu-hover); }
.s-tb .tb-bloc--maintenant .tb-appeler svg{ color:#fff; }
/* Le nom dans le titre : la fiche du CRM (souligné au survol, même couleur que le titre). */
/* Zone à toucher de 32 px (44 px sur téléphone) sans agrandir la ligne : marge intérieure compensée par une marge
   négative de même hauteur. */
.s-tb .tb-nom{ display:inline-block; font:inherit; color:inherit; background:none; border:0; padding:6px 0; margin:-6px 0;
  cursor:pointer; text-align:left; vertical-align:baseline; line-height:20px;
  text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:3px; }
.s-tb .tb-nom:hover{ text-decoration-color:currentColor; }
.s-tb .tb-valider{ min-width:var(--ctrl-h-sm); padding:0; justify-content:center; font-size:var(--fs-16); }
.s-tb .tb-valider--a-faire{ background:var(--surface); color:var(--vert); border-color:var(--rule-strong); font-weight:var(--fw-fort); }
.s-tb .tb-valider--a-faire:hover{ background:var(--vert-tint); color:var(--vert); }
.s-tb .tb-valider:disabled{ opacity:.55; cursor:wait; }
/* Garde de 0,7 s après un « ✓ » (la ligne suivante a glissé sous le doigt) : le bouton attend, sans changer de couleur. */
.s-tb .tb-valider[aria-disabled="true"]{ cursor:wait; }
.s-tb .tb-valider--a-faire[aria-disabled="true"]:hover{ background:var(--surface); color:var(--vert); }

/* Téléphone : boutons de 44 px (doigt) */
@media (max-width:899px){
  .s-tb .tb-actions .btn{ min-height:var(--tap); }
  .s-tb .tb-valider{ min-width:var(--tap); }
  .s-tb .tb-fait-titre{ min-height:44px; }
  .s-tb .tb-nom{ padding:12px 0; margin:-12px 0; }
}
@media (max-width:640px){
  .s-tb .tb-tete{ padding:var(--sp-3) var(--sp-4); }
  .s-tb .tb-tuiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .s-tb .tb-tuile{ padding:12px; }
  /* Les 3 petites tuiles du setting sur une seule rangée (avant : une ligne pleine chacune, sous l'écran) */
  .s-tb .tb-tuiles--petites{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .s-tb .tb-tuiles--petites .tb-tuile{ padding:10px; }
  .s-tb .tb-tuiles--petites .tb-tuile-titre{ font-size:var(--fs-12); overflow-wrap:anywhere; }
  .s-tb .tb-ligne{ gap:10px; padding:12px; flex-wrap:wrap; }
  .s-tb .tb-corps{ flex:1 1 150px; }
  .s-tb .tb-actions{ margin-left:auto; }
}