/* B4U V2 — version épurée · Tâches et Appels.
   Ce qui est propre à cet écran ; la trousse commune est dans epure.css. */

/* ───────── Tâches : en-tête, carte d'envoi en une ligne, une colonne par personne ───────── */
.tch { display: flex; flex-direction: column; gap: 20px; }
.tch-tete { display: flex; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; }
.tch-tete .titres { flex: 1; min-width: 240px; }
.tch-tete h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.tch-tete .sous { color: var(--encre-2); font-size: 16px; margin-top: 2px; }
.tch-onglets { display: flex; gap: 20px; }
.tch-onglet { border: 0; background: none; padding: 8px 2px; font-weight: 700; color: var(--encre-2); border-bottom: 3px solid transparent; white-space: nowrap; }
.tch-onglet:hover { color: var(--encre); }
.tch-onglet.actif { color: var(--encre); border-bottom-color: var(--encre); }

.tch-envoi { padding: 18px 22px; }
.tch-envoi-ligne { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tch-envoi-ligne > .champ { flex: 1 1 140px; }
.tch-envoi-ligne > .tch-quoi { flex: 3 1 300px; }
.tch-envoi-ligne > .tch-cmd { flex: 1 1 170px; }
.tch-envoi-ligne > .champ > label { font-size: 13px; }
.tch-envoyer { height: 44px; padding: 0 20px; margin-top: 23px; }
/* « Que faut-il faire ? » : quatre actions côte à côte, au-dessus de la ligne d'envoi (et dans la fenêtre « Nouvelle tâche »).
   L'action choisie est en noir ; « Contacter / Appeler… » ouvre la fenêtre d'appel. */
.tch-actions { flex: 1 1 100%; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 2px; }
.tch-actions-titre { font-size: 15px; font-weight: 700; }
.tch-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.tch-act { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--encre); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.tch-act:hover { background: var(--fond-2); }
.tch-act.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.tch-lib-replie { display: none; }
.tch-envoi-ligne > .tch-large { flex: 3 1 300px; }
.ta-aide[hidden] { display: none; }
.tch-aide { margin-top: 10px; color: var(--encre-2); font-size: 14px; min-height: 1.4em; }

.tch-qui { display: none; }
.tch-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; align-items: start; }
.tch-cols.seule { grid-template-columns: minmax(0, 640px); }
.tch-col { overflow: hidden; }
.tch-col[hidden], .tch-arrive[hidden] { display: none; }
/* Ma colonne reste la première ; celle d'une personne sans tâche, à qui l'on écrit, vient se placer juste après. */
.tch-col:first-child { order: -2; }
.tch-col.arrive-ici { order: -1; }
.tch-col.visee { border-color: var(--bleu-600); box-shadow: 0 0 0 1px var(--bleu-600); }
.tch-col-tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.tch-col-tete .avatar { width: 34px; height: 34px; font-size: 12px; }
.tch-col-tete b { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tch-col-tete .n { color: var(--encre-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.tch-bloq { background: var(--t-rouge); color: #fff; }
.tch-rien { padding: 2px 16px 16px; color: var(--encre-2); font-size: 14px; }
.tch-arrive { margin: 0 16px 16px; padding: 12px; border: 1px dashed #b9bdc8; border-radius: 10px; color: var(--encre-2); font-size: 14px; text-align: center; }

/* Une ligne : la case (ou le téléphone d'un appel), le titre, une ligne grise. Rien d'autre. */
.tch-t { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ligne); align-items: start; }
.tch-coche { width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.75px solid var(--encre-3); background: var(--surface); display: grid; place-items: center; color: transparent; padding: 0; }
.tch-coche:hover { border-color: var(--encre); color: var(--encre); background: var(--fond-2); }
.tch-coche .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.tch-coche.appel { border-radius: 50%; color: var(--encre-2); }
.tch-t.fait .tch-coche { background: var(--encre); border-color: var(--encre); color: #fff; }
.tch-corps { border: 0; background: none; padding: 0; text-align: left; min-width: 0; color: inherit; }
.tch-corps b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.tch-corps small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1px; font-size: 13.5px; color: var(--encre-2); overflow-wrap: anywhere; }
.tch-corps:hover b { text-decoration: underline; text-underline-offset: 2px; }
.tch-t.fait .tch-corps b { color: var(--encre-2); font-weight: 600; }
/* Tâche liée à une commande : le titre et la ligne grise ouvrent la tâche ; « Zara 53018842 » ouvre les colis. */
.tch-txt { min-width: 0; }
.tch-txt .tch-corps { display: block; width: 100%; }
.tch-sous { display: block; margin-top: 1px; font-size: 13.5px; color: var(--encre-2); overflow-wrap: anywhere; cursor: pointer; }
/* V5 · logistique — la tâche d'un colis pas encore disponible : elle attend (bleu = en attente), jamais en rouge. */
.tch-attente { color: var(--t-bleu); font-weight: 600; }
.ta-attente { margin-top: 10px; }

/* ───────── L'identification d'une commande, cliquable pour consulter ses colis (lignes de tâche, accueil, fenêtres) ─────────
   Souligné discret. C'est un élément en ligne : son remplissage vertical agrandit la zone sensible sans déplacer la ligne.
   Il s'étend surtout vers le bas (la marge vide de la ligne), très peu vers le titre de la tâche, juste au-dessus. */
.suivis-lien { padding: 3px 0 9px; color: inherit; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #a9aebb; }
.suivis-lien:hover { color: var(--encre); text-decoration-color: currentColor; }

/* ───────── Fenêtre « Colis de la commande » (consultation seule) ───────── */
.modale[data-modale="suivis"] .modale-tete h2 { overflow-wrap: anywhere; }
.modale[data-modale="valider-recup"] { max-width: 600px; }
.sv-liste, .vr-colis { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bord); border-radius: 12px; }
.sv-colis { padding: 12px 14px; }
.sv-colis + .sv-colis, .vr-colis li + li { border-top: 1px solid var(--ligne); }
.sv-haut { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.sv-haut .statut { margin-left: auto; }
.sv-vise { color: var(--encre-2); font-size: 13.5px; }
.sv-numero { margin-top: 4px; font-size: 16.5px; line-height: 1.35; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.sv-numero.sv-absent { font-size: 15px; color: var(--encre-2); }
.sv-gestes { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 2px; }
.sv-gestes a, .sv-gestes button.lien { font-weight: 600; padding: 4px 0; }
.sv-mot { margin-top: 4px; font-size: 14px; color: var(--encre-2); overflow-wrap: anywhere; }
/* Qui va chercher ce colis, et « Changer » pour qui peut le désigner */
.sv-qui { margin-top: 2px; font-size: 14px; color: var(--encre-2); overflow-wrap: anywhere; }
.sv-qui b { color: var(--encre); font-weight: 600; }
.sv-qui button.lien { padding: 4px 0; }
.sv-vide { color: var(--encre-2); }
.sv-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-right: auto; }
.sv-ident { overflow-wrap: anywhere; }
.sv-ident .suivis-lien { padding: 8px 0; font-weight: 700; color: var(--encre); text-decoration-color: var(--encre-3); }
.sv-ident > span { color: var(--encre-2); }
/* Validation d'une récupération : les colis concernés, puis ceux qui ne le sont pas */
.vr-portee { font-weight: 600; }
.vr-colis li { padding: 10px 14px; overflow-wrap: anywhere; }
.vr-autres { color: var(--encre-2); font-size: 14px; }
.tch-pied { color: var(--encre-2); font-size: 14px; }

/* Notes : une liste simple, on clique la note */
.tch-notes { max-width: 760px; overflow: hidden; }
.tch-notes-tete { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px 12px; flex-wrap: wrap; }
.tch-notes-tete h2 { font-size: 18px; font-weight: 800; }
.tch-notes-tete .n { color: var(--encre-2); font-weight: 600; flex: 1; }
.tch-notes-saisie { padding: 0 20px 14px; }
.tch-note { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--ligne); background: none; padding: 12px 20px; color: inherit; }
.tch-note:hover { background: var(--survol); }
.tch-note span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.tch-note small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--encre-2); }

/* ───────── Appels : la fiche ───────── */
.ap-carte { padding: 22px 24px; }
.ap-numero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ap-num { flex: 1; min-width: 220px; }
.ap-tel { font-size: 26px; letter-spacing: .01em; line-height: 1.25; overflow-wrap: anywhere; }
.ap-sans-tel { font-size: 20px; font-weight: 700; color: var(--encre-2); }
.ap-appeler { height: 52px; padding: 0 28px; font-size: 16px; }
.ap-motif { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.ap-motif b { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ap-motif p { margin-top: 4px; color: var(--encre-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-apres .entree-ligne { margin: 12px 0; }
.ap-issues { display: flex; gap: 10px; flex-wrap: wrap; }
.ap-issues .btn { flex: 1 1 180px; height: 44px; white-space: normal; line-height: 1.2; }
.ap-regle { border: 2px solid var(--encre); }
.ap-dit { margin-top: 6px; overflow-wrap: anywhere; }

/* ───────── Fenêtres « Nouvelle tâche » et « Envoyer en appel » ───────── */
.modale[data-modale="appel"], .modale[data-modale="tache"] { max-width: 460px; }
.ap-seg { display: flex; border: 1px solid var(--bord-fort); border-radius: 10px; overflow: hidden; }
.ap-seg label { position: relative; flex: 1; min-width: 0; }
.ap-seg input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ap-seg span { display: flex; align-items: center; justify-content: center; height: 44px; font-weight: 700; font-size: 14.5px; color: var(--encre-2); background: var(--surface); }
.ap-seg input:checked + span { background: var(--encre); color: #fff; }
.ap-seg input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--halo); }
.ap-personne { display: flex; gap: 8px; margin-top: 3px; }
.ap-personne > select, .ap-personne > input { flex: 1.5 1 0; min-width: 0; }
.ap-personne > input[type="tel"] { flex: 1 1 0; }
.ap-quand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px; gap: 10px; align-items: start; }
.ap-quand.seul { grid-template-columns: minmax(0, 1fr) 112px; }
.ap-rappel { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; align-items: start; }
.ap-rappel[hidden] { display: none; }
.ap-quand input[type="time"], .ap-rappel input[type="time"] { padding: 0 8px; }

@media (max-width: 760px) {
  .tch { gap: 14px; }
  .tch-tete h1 { display: none; }
  .tch-tete .titres { flex-basis: 100%; }
  .tch-tete .sous { font-size: 15px; margin-top: 0; }
  .tch-onglets { width: 100%; gap: 0; border-bottom: 1px solid var(--bord); }
  .tch-onglet { flex: 1; padding: 10px 2px; margin-bottom: -1px; }
  .tch-envoi { padding: 14px; }
  /* La carte d'envoi : un seul champ tant qu'on n'y touche pas ; le reste se déplie, empilé. */
  .tch-envoi-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .tch-envoi-ligne > .tch-quoi, .tch-envoi-ligne > .tch-cmd, .tch-envoi-ligne.sans-qui > .champ { grid-column: 1 / -1; }
  .tch-envoyer { margin-top: 4px; height: 46px; grid-column: 1 / -1; }
  .tch-envoi:not(.plein) .tch-envoi-ligne > :not(.tch-quoi), .tch-envoi:not(.plein) .tch-aide { display: none; }
  /* Repliée : le seul champ garde son nom de toujours ; dépliée : les quatre actions, puis la ligne empilée. */
  .tch-envoi:not(.plein) .tch-lib { display: none; }
  .tch-envoi:not(.plein) .tch-lib-replie { display: inline; }
  .tch-actions { grid-column: 1 / -1; display: block; margin-bottom: 0; }
  .tch-actions-titre { display: block; margin-bottom: 8px; }
  .tch-act { height: 42px; }
  .tch-envoi[data-mode="recup"] .tch-envoi-ligne > .champ { grid-column: 1 / -1; }
  .tch-qui { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
  .tch-qui::-webkit-scrollbar { display: none; }
  .tch-puce { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 8px; border-radius: 20px; border: 1px solid var(--bord-fort); background: var(--surface); font-weight: 700; white-space: nowrap; flex: none; color: var(--encre); }
  .tch-puce span:last-child { color: var(--encre-2); font-weight: 600; }
  .tch-puce.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
  .tch-puce.actif span:last-child { color: #fff; }
  .tch-cols, .tch-cols.seule { grid-template-columns: minmax(0, 1fr); }
  .tch-col:not(.choisie) { display: none; }
  .tch-cols:not(.seule) .tch-col-tete { display: none; } /* le sélecteur de personne dit déjà qui et combien */
  .tch-cols:not(.seule) .tch-col > .tch-t:first-of-type { border-top: 0; }
  .tch-cols:not(.seule) .tch-rien { padding-top: 14px; }
  .tch-col.visee { border-color: var(--bord); box-shadow: none; }
  .tch-t { grid-template-columns: 26px minmax(0, 1fr); padding: 13px 14px; }
  .suivis-lien { padding: 4px 0 23px; } /* zone tactile : plus de 40 px de haut, vers le bas */
  .sv-ident .suivis-lien { padding: 12px 0; }
  .sv-gestes a, .sv-gestes button.lien { padding: 11px 0; }
  .sv-qui { margin-top: 0; }
  .sv-qui button.lien { padding: 11px 0; }
  .sv-vise { order: 3; flex-basis: 100%; }
  .sv-liens { flex: 1 1 100%; gap: 0 20px; }
  .sv-liens a { padding: 10px 0; }
  .tch-coche { width: 26px; height: 26px; }
  .tch-col-tete { padding: 12px 14px; }
  .tch-notes-tete, .tch-note { padding-left: 14px; padding-right: 14px; }
  .tch-notes-saisie { padding: 0 14px 12px; }
  .ap-carte { padding: 16px; }
  .ap-tel { font-size: 24px; }
  .ap-num { min-width: 0; flex-basis: 100%; }
  .ap-appeler { width: 100%; }
  .ap-quand, .ap-quand.seul { grid-template-columns: minmax(0, 1fr) 110px; }
  .ap-quand:not(.seul) > .champ:first-child { grid-column: 1 / -1; }
}

/* Fenêtre d'appel : le contact d'une boutique tel qu'il est noté dans le répertoire importé */
.ap-contact-boutique { margin-top: 8px; font-size: 13.5px; color: var(--encre-2); overflow-wrap: anywhere; }