/* =========================================================================
   Module Tâches — vue KANBAN (Lot B) : styles
   -------------------------------------------------------------------------
   Tout est préfixé `.tkb-` : aucune collision possible avec tablette.css ni
   avec taches-core.css. On n'utilise QUE les variables de tablette.css
   (--card, --bg, --txt, --txt2, --sep, --blue, --red, --green…) : le tableau
   suit donc automatiquement le thème de l'app, mode sombre compris.
   ========================================================================= */

.tkb {
  --tkb-w: 292px;            /* largeur d'une colonne */
  --tkb-gap: 12px;           /* espace entre colonnes */
  --tkb-pad: 20px;           /* = padding horizontal de .content */
  --tkb-mini: 48px;          /* largeur d'une colonne repliée */
  position: relative;
}

/* ------------------------------ barre --------------------------------- */
.tkb-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin: 0 0 10px;
}
.tkb-bar .grow { flex: 1; min-width: 0; }
/* v427 : barre du Trello compacte — elle vit sous les outils du module, la
   hauteur gagnée va aux cartes. */
.tkb-bar .btn { padding: 6px 12px; font-size: 13.5px; min-height: 32px; }
.tkb-astuce {
  font-size: 12.5px; color: var(--txt2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tkb-astuce kbd {
  font: inherit; font-weight: 700;
  background: rgba(120, 120, 128, .16); border-radius: 5px; padding: 1px 5px;
}

/* --------------------------- zone de défilement ------------------------ */
/* On déborde volontairement du padding de `.content` : le tableau touche les
   bords de l'écran, comme un vrai Kanban, tout en gardant l'alignement des
   autres écrans. Le défilement horizontal reste confiné ici (le corps de la
   page ne défile jamais latéralement). */
.tkb-board {
  margin: 0 calc(-1 * var(--tkb-pad));
  /* padding-top nul : sinon les cartes défilantes apparaissent dans la bande
     laissée libre au-dessus des en-têtes collants. */
  padding: 0 var(--tkb-pad) 18px;
  max-height: var(--tkb-h, 68vh);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tkb-board:focus { outline: none; }
.tkb-board::-webkit-scrollbar { height: 10px; width: 10px; }
.tkb-board::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, .3); border-radius: 6px;
  border: 3px solid transparent; background-clip: padding-box;
}

.tkb-grille { width: max-content; min-width: 100%; }

/* --------------------------- en-têtes de colonnes ---------------------- */
.tkb-tetes {
  display: flex; gap: var(--tkb-gap); align-items: stretch;
  position: sticky; top: 0; z-index: 5;
  padding: 6px 0 8px;
  background: var(--bg);
}
.tkb-tete {
  flex: 0 0 var(--tkb-w); width: var(--tkb-w);
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px 9px 12px;
  background: var(--card); border-radius: 13px;
  border-top: 3px solid var(--c, #8e8e93);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.tkb-tete.repliee {
  flex: 0 0 var(--tkb-mini); width: var(--tkb-mini);
  justify-content: center; gap: 4px; padding: 9px 2px;
}
.tkb-tete.repliee .tkb-tete-lb { display: none; }
.tkb-tete-lb {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkb-tete-n {
  flex: 0 0 auto; min-width: 22px; padding: 1px 7px; text-align: center;
  background: rgba(120, 120, 128, .16); border-radius: 9px;
  font-size: 12px; font-weight: 700; color: var(--txt2);
  font-variant-numeric: tabular-nums;
}
.tkb-tete-min {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--txt2);
  white-space: nowrap;
}
.tkb-plier, .tkb-plus {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--txt2);
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.tkb-plus { font-size: 17px; color: var(--blue); font-weight: 700; }
.tkb-plier:hover, .tkb-plus:hover { background: rgba(120, 120, 128, .16); }
.tkb-plus:hover { color: var(--blue); background: rgba(0, 122, 255, .12); }
.tkb-plier:active, .tkb-plus:active { transform: scale(.9); }

/* ------------------------------ couloirs ------------------------------- */
.tkb-lane { display: block; }
.tkb-lane-h {
  position: sticky; left: var(--tkb-pad); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 6px; padding: 4px 12px 4px 4px;
  background: var(--bg); border-radius: 11px;
}
.tkb-lane-lb {
  font-size: 13px; font-weight: 700; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .05em;
}
.tkb-lane-n, .tkb-lane-min {
  font-size: 12px; font-weight: 600; color: var(--txt2);
  background: rgba(120, 120, 128, .16); border-radius: 9px; padding: 1px 8px;
}
.tkb-lane-pt {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.tkb-grille.avec-lanes .tkb-lane + .tkb-lane { margin-top: 4px; }

/* `stretch` : toutes les colonnes d'un couloir ont la même hauteur. Le fond
   teinté descend donc jusqu'en bas et l'on peut déposer une carte n'importe
   où dans la colonne, pas seulement sur la pile de cartes. */
.tkb-rangee { display: flex; gap: var(--tkb-gap); align-items: stretch; }

/* ------------------------------ colonnes ------------------------------- */
.tkb-col {
  flex: 0 0 var(--tkb-w); width: var(--tkb-w);
  display: flex; flex-direction: column;
  padding: 8px; border-radius: 15px;
  background: rgba(120, 120, 128, .075);
  border: 2px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}
.tkb-col.cible {
  background: rgba(0, 122, 255, .1);
  border-color: rgba(0, 122, 255, .45);
}
.tkb-col.refus {
  background: rgba(255, 59, 48, .1);
  border-color: rgba(255, 59, 48, .5);
}
.tkb-col.repliee {
  flex: 0 0 var(--tkb-mini); width: var(--tkb-mini);
  padding: 10px 4px; cursor: pointer; min-height: 120px;
  justify-content: flex-start; align-items: center;
  background: repeating-linear-gradient(135deg,
    rgba(120, 120, 128, .07) 0 8px, rgba(120, 120, 128, .03) 8px 16px);
}
.tkb-col.repliee:hover { background: rgba(0, 122, 255, .1); }
.tkb-col-mini {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; color: var(--txt2);
}
.tkb-mini-lb {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 700; letter-spacing: .04em; max-height: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkb-mini-n {
  font-weight: 700; background: rgba(120, 120, 128, .18);
  border-radius: 8px; padding: 1px 6px;
}
.tkb-col.repliee .tkb-body { display: none; }

/* La pile de cartes ne s'étire pas : le bouton « ＋ Ajouter » reste collé
   sous la dernière carte. La colonne, elle, occupe toute la hauteur du
   couloir — et `majCible()` vise `.tkb-col`, donc on peut déposer une carte
   dans le vide sous la pile. */
.tkb-body {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 54px;
}
.tkb-vide {
  border: 1.5px dashed var(--sep); border-radius: 11px;
  padding: 18px 8px; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--txt2);
}
.tkb-body.a-place .tkb-vide { display: none; }

.tkb-add-bas {
  width: 100%; text-align: left; margin-top: 6px;
  padding: 8px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--txt2); opacity: .8;
  transition: background .18s ease, opacity .18s ease, color .18s ease;
}
.tkb-add-bas:hover { background: rgba(0, 122, 255, .1); color: var(--blue); opacity: 1; }

/* ---------------------------- ajout rapide ----------------------------- */
.tkb-ajout {
  background: var(--card); border-radius: 12px; padding: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  animation: tkb-pop .18s ease;
}
.tkb-ajout textarea {
  width: 100%; border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--txt);
  font-size: 15px; line-height: 1.35; min-height: 46px;
}
.tkb-ajout-a { display: flex; gap: 6px; margin-top: 6px; }
.tkb-ajout-a .btn { padding: 7px 12px; font-size: 14px; }

/* ------------------------------- cartes -------------------------------- */
.tkb-carte {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px 10px 11px;
  background: var(--card); border-radius: 12px;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  cursor: pointer; touch-action: manipulation;
  -webkit-touch-callout: none; -webkit-user-drag: none;
  transition: box-shadow .18s ease, transform .12s ease,
              opacity .18s ease, background .18s ease;
}
.tkb-carte:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .13); }
.tkb-carte:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .13);
}
.tkb-carte.p-haute { border-left-color: var(--red); }
.tkb-carte.p-basse { border-left-color: var(--blue); }
.tkb-carte.retard { border-left-color: var(--red); }
.tkb-carte.bloquee { border-left-color: #ff9500; }
.tkb-carte.finie { opacity: .62; }
.tkb-carte.finie .tkb-c-titre { text-decoration: line-through; color: var(--txt2); }
.tkb-carte.arch { opacity: .5; }
/* appui long en cours : la carte « s'enfonce » avant d'être saisie */
.tkb-carte.tkb-attente { transform: scale(.97); opacity: .85; }

.tkb-c-haut {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding-right: 14px;
}
.tkb-b { font-size: 12.5px; line-height: 1; }
/* v425 — l'échéance en haut à droite de la carte, en pastille colorée */
.tkb-c-haut .tkb-ech-haut { margin-left: auto; }
/* Poignée d'affordance : discrète, en haut à droite, révélée au survol. */
.tkb-grip {
  position: absolute; top: 7px; right: 7px;
  font-size: 13px; line-height: 1; color: var(--txt2);
  opacity: 0; letter-spacing: -2px; pointer-events: none;
  transition: opacity .18s ease;
}
.tkb-carte:hover .tkb-grip { opacity: .45; }

.tkb-c-titre {
  font-size: 14.5px; font-weight: 600; line-height: 1.32; color: var(--txt);
  overflow-wrap: anywhere; padding-right: 12px;
}
.tkb-c-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tkb-c-tags .tk-tag { font-size: 11px; padding: 1px 7px; }

.tkb-c-prog {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(120, 120, 128, .18);
}
.tkb-c-prog i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--blue); transition: width .25s ease;
}

.tkb-c-cmd {
  font-size: 12px; font-weight: 600; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkb-c-pied {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--txt2);
}
.tkb-c-metas {
  flex: 1; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
}
.tkb-c-pied .tk-av { width: 19px; height: 19px; font-size: 9px; margin-right: 2px; }
.tkb-ech.late { color: var(--red); font-weight: 700; }
/* v383 — infos éditables SUR la carte : un bouton qui ressemble à l'info. */
.tkb-edit {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; line-height: inherit;
  border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
  min-height: 0; min-width: 0;
}
.tkb-edit:hover { background: var(--fill, rgba(120, 120, 128, .12)); }
.tkb-edit:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tkb-ech.tkb-vide { opacity: .45; }
.tkb-carte:hover .tkb-ech.tkb-vide { opacity: .8; }
.tkb-prio { font-size: 11px; padding: 1px 7px; }
.tkb-prio.tkb-prio-n { opacity: .7; }
.tkb-ed-prio, .tkb-ed-av { padding: 0; }
.tkb-ok { color: #1e9e46; font-weight: 700; }

/* ------------------------- glisser-déposer ----------------------------- */
/* La carte d'origine reste dans le DOM et sert de zone d'accueil animée :
   elle garde ainsi la capture implicite du pointeur tactile. */
.tkb-source {
  background: rgba(0, 122, 255, .09) !important;
  border: 2px dashed rgba(0, 122, 255, .5) !important;
  border-left-width: 2px !important;
  box-shadow: none !important;
  cursor: grabbing;
  animation: tkb-place .18s ease;
}
.tkb-source > * { visibility: hidden; }

.tkb-fantome {
  position: fixed; left: 0; top: 0; z-index: 9999;
  pointer-events: none; margin: 0; cursor: grabbing;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
  opacity: .96;
  transition: opacity .12s ease, outline-color .12s ease;
  outline: 2px solid transparent;
}
.tkb-fantome.hors { opacity: .45; }
.tkb-fantome.refus { outline-color: var(--red); }
.tkb-fantome .tkb-grip { opacity: .5; }

.tkb-drag { cursor: grabbing; }
.tkb-drag .tkb-carte { touch-action: none; cursor: grabbing; }
.tkb-drag .tkb-board { scroll-behavior: auto; }
body.tkb-nosel {
  user-select: none; -webkit-user-select: none; cursor: grabbing;
}

@keyframes tkb-pop { from { opacity: 0; transform: translateY(-5px); } }
@keyframes tkb-place { from { opacity: .3; transform: scale(.96); } }

/* v427 : tableau SIMPLE (sans couloirs) = les colonnes descendent jusqu'en
   bas de l'écran — la zone de dépôt couvre toute la hauteur, et le tableau
   « remplit » l'écran au lieu de flotter au-dessus d'un grand vide.
   `--tkb-h` est la hauteur restante calculée par majHauteur() : le tableau
   s'arrête pile au bas de l'écran, la page ne déborde pas. */
.tkb-board:has(> .tkb-grille:not(.avec-lanes)) { height: var(--tkb-h, 68vh); }
.tkb-grille:not(.avec-lanes) { display: flex; flex-direction: column; min-height: 100%; }
.tkb-grille:not(.avec-lanes) > .tkb-lane { flex: 1; display: flex; flex-direction: column; }
.tkb-grille:not(.avec-lanes) > .tkb-lane > .tkb-rangee { flex: 1; }

/* ------------------------------ responsive ----------------------------- */
/* < 700 px : carrousel « pleine largeur », une colonne à la fois, avec
   accrochage au défilement pour ne jamais s'arrêter entre deux colonnes. */
/* `--tkb-pad` doit valoir EXACTEMENT le padding horizontal de `.content`
   (tablette.css) : c'est de lui que dépend le débordement propre du tableau.
   tablette.css bascule à 14 px sous 640 px — pas sous 699 px. */
@media (max-width: 640px) {
  .tkb { --tkb-pad: 14px; }
}

@media (max-width: 699px) {
  .tkb {
    --tkb-w: min(86vw, 330px);
    --tkb-gap: 10px;
  }
  .tkb-board { scroll-snap-type: x proximity; }
  .tkb-tete { scroll-snap-align: start; }
  .tkb-astuce { display: none; }
  /* v427 : UNE ligne qui défile au doigt plutôt que deux lignes de boutons ;
     les préfixes « Colonnes : » / « Couloirs : » tombent (infobulle gardée). */
  .tkb-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--tkb-pad)) 8px; padding: 0 var(--tkb-pad); }
  .tkb-bar::-webkit-scrollbar { display: none; }
  .tkb-bar .btn { flex: none; padding: 7px 11px; font-size: 13.5px; }
  .tkb-bar .grow { display: none; }
  .tkb-lb-long { display: none; }
  .tkb-c-titre { font-size: 15px; }
  /* cible tactile plus généreuse */
  .tkb-plier, .tkb-plus { width: 30px; height: 30px; }
}

@media (min-width: 1100px) {
  .tkb { --tkb-w: 306px; }
}

/* Mode sombre : les variables de tablette.css font le gros du travail ; on
   n'ajuste ici que les teintes fixes (ombres, gris) qui ne s'y adaptent pas. */
@media (prefers-color-scheme: dark) {
  .tkb-tete, .tkb-carte, .tkb-ajout { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
  .tkb-carte:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, .6); }
  .tkb-col { background: rgba(120, 120, 128, .13); }
  .tkb-fantome { box-shadow: 0 16px 40px rgba(0, 0, 0, .7); }
}

@media (prefers-reduced-motion: reduce) {
  .tkb-carte, .tkb-col, .tkb-c-prog i, .tkb-plier, .tkb-plus,
  .tkb-add-bas, .tkb-grip, .tkb-fantome {
    transition: none;
  }
  .tkb-ajout, .tkb-source { animation: none; }
}