/* Disposition uniquement : composants et mesures de l'identité 2026. */
#vue-jobs, #vue-artefacts { width: 100%; min-width: 0; }
#vue-jobs :is(a, button), #vue-artefacts a { text-decoration: none; }
#vue-jobs :is(h1,h2,h3,p,strong,dd), #vue-artefacts :is(h1,h2,h3,p,strong) { overflow-wrap: anywhere; }
#vue-jobs :is(fieldset,legend) { border: 0; min-width: 0; }
#vue-jobs fieldset { display: flex; flex-direction: column; gap: var(--espace-3); }
#vue-jobs pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.job-liste-tete, .job-tete, .job-detail-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4); }
.job-liste-tete h1, .job-titre { flex: 1; min-width: 0; }
.job-titre h1 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
.job-meta, .job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
.job-meta { margin-top: var(--espace-2); font-size: var(--t-aide); }
.job-meta .pastille { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.job-meta .jauge { flex-direction: row; align-items: center; }
.job-meta progress { width: calc(var(--controle-h) * 2); }
#jobs-liste, #artefacts-liste { display: flex; flex-direction: column; gap: var(--espace-2); }
.job-colonnes, .job-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .6fr); gap: var(--espace-4); align-items: center; }
.job-colonnes { font-size: var(--t-repere); line-height: var(--i-repere); text-transform: uppercase; color: var(--text-secondary); }
.job-ligne { color: var(--text-primary); min-height: var(--ligne-h); }
.job-ligne :is(time, span:not(.pastille)) { font-size: var(--t-aide); line-height: var(--i-aide); }
.job-ligne .pastille { justify-self: start; white-space: normal; }
.job-ligne:hover { background: var(--bg-hover); }
.job-tete { flex: none; }
.job-associe { position: relative; padding: 0; flex: none; border-radius: var(--rayon-rond); }
.job-associe img { width: var(--espace-7); height: var(--espace-7); object-fit: cover; border-radius: var(--rayon-rond); }
.job-associe span { position: absolute; bottom: 0; right: 0; padding-inline: var(--espace-1); font-size: var(--t-repere); line-height: var(--i-repere); border-radius: var(--rayon-controle); background: var(--agent-d-pastille); color: var(--agent-d-sigle); }
.job-confirmation { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }
#job-notice:empty { display: none; }
.chat[data-view="job"] #vue-jobs { position: relative; overflow: hidden; }
.job-espace { position: relative; flex: 1; min-height: 0; min-width: 0; }
#job-travail { height: 100%; min-width: 0; min-height: 0; overflow: auto; }
.job-toile { min-width: 0; width: 100%; height: 100%; overflow: auto; padding: var(--espace-1); }
.job-dessin { position: relative; margin-inline: auto; }
.job-aretes { position: absolute; inset: 0; overflow: visible; }
.job-aretes path { fill: none; stroke: var(--text-secondary); stroke-width: calc(var(--espace-1) / 2); }
.job-noeud { position: absolute; padding: var(--espace-4); text-align: left; display: flex; flex-direction: column; gap: var(--espace-2); justify-content: center; border-color: var(--border-controle); }
.job-noeud:hover { background: var(--bg-hover); }
.job-noeud strong { font-weight: var(--g-moyen); min-height: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.job-noeud .pastille { flex-shrink: 0; border: 0; padding: 0; background: none; white-space: normal; text-align: left; }
.job-noeud-type { display: flex; flex-shrink: 0; align-items: center; gap: var(--espace-2); font-size: var(--t-repere); line-height: var(--i-repere); text-transform: uppercase; }
.job-noeud-type .avatar { width: var(--cible-min); height: var(--cible-min); }
.job-noeud-type .buste__sigle { display: none; }
.job-noeud--attend { border-color: var(--accent); border-width: calc(var(--espace-1) / 2); }
.job-point { position: absolute; top: var(--espace-2); right: var(--espace-2); width: var(--espace-2); height: var(--espace-2); border-radius: var(--rayon-rond); background: var(--accent); }
.job-dessin--ensemble .job-noeud { padding: var(--espace-2); gap: var(--espace-1); border-radius: var(--rayon-controle); }
.job-dessin--ensemble .job-noeud strong { display: none; }
.job-dessin--ensemble .job-noeud-type { font-size: var(--t-repere); padding-right: var(--espace-2); }
.job-dessin--ensemble .pastille { font-size: var(--t-aide); line-height: var(--i-aide); }
.job-legende { display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; font-size: var(--t-aide); width: fit-content; }
#job-decision-toile { position: absolute; left: 0; bottom: 0; width: min(var(--largeur-activite), 100%); max-height: 75%; overflow: auto; padding: var(--espace-1); }
#job-decision-toile:empty { display: none; }
.job-espace:has(#job-graphe:not([hidden])) #job-decision-toile { max-height: min(75%, max(calc(var(--controle-h) * 3), calc(100% - var(--job-graphe-hauteur, 0px) - var(--espace-2)))); }
.job-decision, .job-attente { padding: var(--espace-4); }
.job-decision { gap: var(--espace-3); }
.job-decision .repere { color: var(--accent); }
.job-decision :is(details, .job-criteres) { font-size: var(--t-aide); line-height: var(--i-aide); }
.job-decision details summary { cursor: pointer; min-height: var(--controle-h); padding-block: var(--espace-2); }
.job-decision details[open] > :not(summary) { margin-top: var(--espace-2); }
.job-budget { padding-block: var(--espace-2); }
.job-budget legend { color: var(--text-secondary); font-size: var(--t-aide); }
#job-decision-form .job-budget { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--espace-2); }
.job-budget input { padding-inline: var(--espace-2); }
.job-confirme { flex-direction: row; align-items: center; }
.job-confirme input { width: var(--cible-min); min-height: var(--cible-min); flex: none; }
.job-paires, .job-liste-simple, .job-criteres, .job-rubrique, .job-lecteur { display: flex; flex-direction: column; gap: var(--espace-3); }
.job-paires .paire { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--espace-3); align-items: start; }
.job-paires dt { color: var(--text-secondary); }
.job-paires dd { min-width: 0; white-space: pre-wrap; }
.job-criteres li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-2); padding-block: var(--espace-2); }
.job-attention { color: var(--etat-attention); }
.job-navigation { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espace-2); align-self: flex-end; flex: none; padding: var(--espace-2); }
.job-navigation .bouton { font-size: var(--t-aide); }
#job-detail { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; padding-bottom: var(--espace-6); }
#job-detail > .job-detail-tete { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--espace-3); }
#job-detail > .job-detail-tete > :is(a,h2) { grid-column: 1 / -1; }
#job-detail > .job-detail-tete > .pastille { justify-self: start; white-space: normal; }
#job-detail > .job-detail-tete > .champ { flex-direction: row; align-items: center; gap: var(--espace-2); }
#job-detail > .job-detail-tete select { min-width: 0; width: auto; }
.job-detail-tete h2 { flex: 1; }
.job-onglets { padding: var(--espace-2) var(--espace-4); }
.job-onglets .onglets { gap: var(--espace-4); }
.job-selecteur { display: none; }
.job-plan-graphe { height: calc(var(--controle-h) * 7); }
.job-plan-listes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--espace-5); }
.job-plan-listes h3 { margin-bottom: var(--espace-3); }
.job-plan-listes li { display: flex; flex-direction: column; gap: var(--espace-1); }
.job-journal .ligne { display: flex; flex-wrap: wrap; gap: var(--espace-3); padding-block: var(--espace-3); }
.job-journal time { font-size: var(--t-aide); }
.job-journal pre { flex-basis: 100%; }
#job-conversation { position: absolute; inset: 0 auto 0 0; width: min(var(--largeur-activite),100%); min-width: 0; min-height: 0; overflow: hidden; padding: var(--espace-3); z-index: 2; display: flex; flex-direction: column; gap: var(--espace-3); animation: entree-scene .25s ease-out; }
.job-conversation-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); }
#job-fil { flex: 1; min-height: var(--controle-h); overflow: auto; }
#job-fil #thread { display: flex; height: auto; min-height: 100%; padding: 0; }
#job-fil .msg { max-width: 100%; }
#job-fil .msg__avatar { display: none; }
#job-saisie { flex: none; min-width: 0; }
#job-saisie #saisie-fil { display: block; padding: 0; }
#job-saisie .composer { margin: 0; width: 100%; }
#job-saisie #input { min-width: 0; }
#job-saisie .send { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-controle); }
#job-decision-conversation { max-height: 60%; overflow: auto; padding: var(--espace-1); flex: none; }
#job-decision-conversation:empty { display: none; }
.job-conversation-ouverte .job-associe { visibility: hidden; }
@media (min-width: 641px) {
  /* Le zoom et sa décision partagent une ligne, sous la tête du Job. */
  .job-zoom.job-avec-decision:not(.job-conversation-ouverte) .job-espace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,min(40%,var(--largeur-activite))); grid-template-rows: minmax(0,1fr); gap: var(--espace-4); }
  .job-zoom #job-decision-toile { position: static; width: 100%; max-height: 100%; padding: 0; align-self: start; }
  /* La conversation prend sa place dans la toile, sans la pousser hors écran. */
  .job-conversation-ouverte .job-espace { display: grid; grid-template-columns: minmax(0,min(40%,var(--largeur-activite))) minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: var(--espace-4); }
  .job-conversation-ouverte #job-travail { grid-column: 2; grid-row: 1; }
  .job-conversation-ouverte #job-conversation { grid-column: 1; grid-row: 1; position: relative; inset: auto; width: 100%; height: 100%; }
}
.job-artefacts { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--espace-5); align-items: start; }
.job-artefacts:not(:has(#artefact-lecture:not([hidden]))) { grid-template-columns: 1fr; }
.job-artefacts-groupe { display: flex; flex-direction: column; gap: var(--espace-3); }
.job-artefacts-groupe a { display: flex; flex-direction: column; align-items: flex-start; color: var(--text-primary); padding: var(--espace-3); border-radius: var(--rayon-controle); }
.job-artefacts-groupe a[aria-current] { background: var(--accent-doux); }
.job-artefacts-groupe a span { font-size: var(--t-aide); }
.job-lecteur { min-width: 0; }
.job-carte-fil { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-3); }
@media (max-width: 1100px) {
  .job-ligne, .job-colonnes { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .job-colonnes span:nth-child(n+3) { display: none; }
  #job-decision-toile { max-height: 75%; }
  .job-plan-listes { grid-template-columns: 1fr; }
  .job-artefacts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chat[data-view="job"] #vue-jobs { overflow: auto; }
  .job-liste-tete { align-items: stretch; }
  .job-liste-tete h1 { flex-basis: 100%; }
  .job-ligne { grid-template-columns: 1fr; gap: var(--espace-2); }
  .job-colonnes { display: none; }
  .job-tete { padding: var(--espace-3); align-items: flex-start; }
  .job-titre h1 { font-size: var(--t-nom); }
  .job-actions { flex-basis: 100%; }
  .job-actions .bouton { font-size: var(--t-aide); padding-inline: var(--espace-2); }
  .job-meta .jauge { flex-wrap: wrap; }
  .job-meta progress { display: none; }
  .job-espace { flex: none; min-height: calc(var(--controle-h) * 8); }
  #job-travail { height: auto; }
  #job-graphe { height: calc(var(--controle-h) * 8); }
  #job-decision-toile, .job-espace:has(#job-graphe:not([hidden])) #job-decision-toile { position: static; width: 100%; max-height: none; overflow: visible; margin-top: var(--espace-3); }
  #job-detail { padding-bottom: var(--espace-6); }
  .job-navigation { align-self: stretch; justify-content: flex-start; }
  .job-navigation .bouton { flex: 1; }
  .job-onglets .onglets { display: none; }
  .job-selecteur { display: flex; }
  .job-paires .paire { grid-template-columns: 1fr; gap: var(--espace-1); }
  #job-conversation { position: fixed; inset: var(--espace-3); width: auto; z-index: 5; }
  .job-conversation-ouverte #job-travail { transform: none; }
  .job-conversation-ouverte :is(#job-tete, #job-travail, #job-navigation) { visibility: hidden; }
  #job-decision-conversation { max-height: 50%; }
  .job-budget { grid-template-columns: 1fr !important; }
  .job-lecteur { padding: var(--espace-3); }
}
@media (prefers-reduced-motion: reduce) { #job-travail { transition: none; } #job-conversation { animation: none; } }

/* Les pastilles portent déjà le signe reçu du contrat. */
#vue-jobs .pastille::before, .job-carte-fil .pastille::before { content: none; }
.job-paires .paire { padding: 0; border: 0; }
.job-associe span { padding: var(--espace-1) var(--espace-2); }

.job-visage { width: var(--espace-7); height: var(--espace-7); border-radius: var(--rayon-rond); object-fit: cover; }
.job-conversation-tete h2 { flex: 1; }

/* Récapitulatif à valider : sous la toile, sur toute la largeur, en deux colonnes lisibles. */
.job-espace:has(#job-decision-toile [data-decision="contrat"]) { display: flex; flex-direction: column; gap: var(--espace-5); overflow: auto; scrollbar-gutter: stable; }
.job-espace:has(#job-decision-toile [data-decision="contrat"]) #job-travail { flex: none; height: var(--job-graphe-hauteur); min-height: 0; }
#job-decision-toile:has([data-decision="contrat"]), .job-espace:has(#job-graphe:not([hidden])) #job-decision-toile:has([data-decision="contrat"]) { position: static; width: auto; max-height: none; flex: none; overflow: visible; }
.job-decision[data-decision="contrat"] { max-height: none; padding: var(--espace-5) var(--espace-6, 32px); }
.job-decision[data-decision="contrat"] > h2 { font-size: var(--t-titre-vue); line-height: 1.25; margin-bottom: var(--espace-4); }
.job-decision[data-decision="contrat"] #job-decision-form > fieldset { font-size: var(--t-texte); line-height: 1.55; }
.job-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5) var(--espace-6); align-items: start; }
.job-recap-col { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.job-recap-col > details { border-top: 1px solid var(--border-subtle); padding-top: var(--espace-3); }
.job-recap-col > details:first-child { border-top: 0; padding-top: 0; }
.job-recap-col > details > summary { font-weight: var(--g-moyen); cursor: pointer; padding-block: var(--espace-1); }
.job-recap-col > details[open] > summary { margin-bottom: var(--espace-3); }
.job-decision[data-decision="contrat"] .job-paires .paire { grid-template-columns: 9em minmax(0, 1fr); }
.job-recap-col > h3.job-recap-controle { margin: var(--espace-2) 0 0; padding-top: var(--espace-3); border-top: 1px solid var(--border-subtle); font-size: var(--t-titre-case); }
.job-decision[data-decision="contrat"] #job-decision-form > fieldset > button { margin-top: var(--espace-5) !important; max-width: 420px; }
.job-decision[data-decision="contrat"] #job-decision-form > fieldset > button + button { margin-top: var(--espace-2) !important; }
.job-liste-numerotee { list-style: decimal; padding-left: 1.6em; gap: var(--espace-2); font-size: var(--t-texte); }
.job-liste-numerotee li { padding-left: var(--espace-1); }
.job-liste-numerotee li::marker { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .job-recap { grid-template-columns: 1fr; }
  .job-decision[data-decision="contrat"] .job-paires .paire { grid-template-columns: 1fr; gap: var(--espace-1); }
}

/* États actifs de la toile : l'étape qui attend respire, l'étape en cours montre son avancée. */
.job-noeud--attend { animation: job-respire 2.2s ease-in-out infinite; }
@keyframes job-respire {
  0%, 100% { box-shadow: var(--ombre-case), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: var(--ombre-case), 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.job-noeud[data-etat="attend_accord"] { animation: job-respire-attention 1.6s ease-in-out infinite; }
@keyframes job-respire-attention {
  0%, 100% { box-shadow: var(--ombre-case), 0 0 0 0 color-mix(in srgb, var(--etat-attention) 50%, transparent); }
  50% { box-shadow: var(--ombre-case), 0 0 0 8px color-mix(in srgb, var(--etat-attention) 0%, transparent); }
}
.job-noeud[data-etat="en_cours"] { overflow: hidden; border-color: var(--accent); }
.job-noeud[data-etat="en_cours"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat;
  animation: job-avance 1.4s linear infinite; }
@keyframes job-avance { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.job-noeud[data-etat="reussi"] { animation: job-reussi 320ms ease-out 1; }
@keyframes job-reussi { from { transform: scale(.97); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .job-noeud--attend, .job-noeud[data-etat="attend_accord"], .job-noeud[data-etat="reussi"] { animation: none; }
  .job-noeud[data-etat="en_cours"]::after { animation: none; background-size: 100% 100%; opacity: .6; }
}

/* Composant « À compléter » : ce qui manque pour finaliser, à part du livrable. */
.a-completer { border-left: 3px solid var(--etat-attention); padding-left: var(--espace-3); display: grid; gap: var(--espace-2); }
.a-completer--echec { border-left-color: var(--etat-echec); }
.a-completer h3 { margin: 0; font-size: var(--t-titre-case); color: var(--etat-attention); }
.a-completer--echec h3 { color: var(--etat-echec); }
.a-completer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-3); }
.a-completer li { display: grid; gap: 2px; font-size: var(--t-texte); line-height: 1.5; }
.a-completer li p { margin: 0; }
.a-completer-action { color: var(--text-primary); font-weight: var(--g-moyen); }
.a-completer--compact ul { gap: var(--espace-1); }
/* Lecture de la livraison : le livrable au centre, ce qui manque et les vérifications à côté. */
.job-lecture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--espace-4); align-items: start; }
.job-lecture-cote { display: flex; flex-direction: column; gap: var(--espace-4); position: sticky; top: 0; }
@media (max-width: 1100px) { .job-lecture { grid-template-columns: 1fr; } .job-lecture-cote { position: static; } }
/* Dans la lecture d'un travail, le livrable occupe sa colonne et reste centré. */
.job-lecture .af-lecture > .af-document { max-width: 900px; width: 100%; margin-inline: auto; }

/* Plan refusé : les raisons du contrôle, au-dessus du plan proposé. */
.job-plan-refus { border-color: var(--etat-echec); display: flex; flex-direction: column; gap: var(--espace-2); }
.job-plan-refus h3 { color: var(--etat-echec); font-size: var(--t-titre-case); }
.job-plan-refus ul { padding-inline-start: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-1); }

/* Dernier fait observé et durée : la mise à jour du chrono ne remonte pas toute la toile. */
.job-vivant { display: flex; flex-direction: column; gap: var(--espace-1); min-width: 0; flex-shrink: 0; font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
.job-vivant-texte { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.job-vivant [data-job-debut] { font-variant-numeric: tabular-nums; }
.job-vivant--erreur { color: var(--etat-echec); }
.job-reprises { padding: var(--espace-3) var(--espace-4); display: grid; gap: var(--espace-2); font-size: var(--t-aide); line-height: var(--i-aide); background: var(--case-reflet), var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case); box-shadow: var(--ombre-case); justify-self: start; }
.job-reprises p { display: grid; gap: var(--espace-1); }
.job-capacites { margin-block: var(--espace-2); color: var(--text-secondary); font-size: var(--t-aide); line-height: var(--i-aide); }
.job-accord-donnees { white-space: pre-wrap; }
.job-attente[role="status"] h2 { animation: job-attente 1.8s ease-in-out infinite; }
@keyframes job-attente { 50% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .job-attente[role="status"] h2 { animation: none; } }

/* Conduite du travail (14 octobre) : ligne vivante de l'associé, ajustements repliés, question métier unique. */
.job-conduite { color: var(--text-secondary); overflow-wrap: anywhere; }
.job-conduite time { font-variant-numeric: tabular-nums; }
.job-ajustements-case { padding: var(--espace-3) var(--espace-4); justify-self: start; font-size: var(--t-aide); line-height: var(--i-aide); }
.job-ajustements summary { cursor: pointer; font-weight: 500; }
.job-ajustements ol { margin-top: var(--espace-2); display: grid; gap: var(--espace-2); }
.job-ajustements li { display: grid; gap: var(--espace-1); overflow-wrap: anywhere; }
.job-reserves, .job-suites, .job-exigences { display: grid; gap: var(--espace-2); }
.job-reserves { color: var(--etat-attention); }
.job-reprises summary { cursor: pointer; }
.job-options { border: 0; padding: 0; margin: 0 0 var(--espace-3); display: grid; gap: var(--espace-2); min-width: 0; }
.job-options legend { font-size: var(--t-aide); color: var(--text-secondary); margin-bottom: var(--espace-1); }
.job-option { display: flex; align-items: flex-start; gap: var(--espace-2); padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--border-controle); border-radius: var(--rayon-case); cursor: pointer; min-width: 0; }
.job-option > span { display: grid; gap: var(--espace-1); min-width: 0; overflow-wrap: anywhere; }
.job-option input { margin-top: .2em; flex-shrink: 0; }
.job-option:has(input:checked) { border-color: var(--accent); }
.job-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.job-recommandation { font-size: var(--t-aide); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .job-option, .job-ajustements summary { transition: none; animation: none; } }