/* ─── Le mur de l'équipe (18/09/2026 · redessiné le 22/09) ───
   Une colonne par personne, et dans chaque colonne les mêmes lignes que
   « Mes tâches » : un liseré à gauche dit l'état — rouge en retard, jaune
   aujourd'hui, bleu à venir, gris un jour, vert traitée. Les projets de chacun
   en tête de colonne, avec l'anneau d'avancement. Une croix au survol supprime. */
.x4-mur { display: flex; flex-direction: column; gap: 14px; }

/* Le pouls : les chiffres de tout le mur */
.x4-mur-pouls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x4-mur-pouls > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .045)); font-size: 12px; font-weight: 550; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-mur-pouls > span b { font-size: 15px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text, #16171a); font-variant-numeric: tabular-nums; }
.x4-mur-pouls > span.est-retard { background: var(--neg-soft, rgba(179, 38, 30, .1)); color: var(--neg-fg, #b3261e); } .x4-mur-pouls > span.est-retard b { color: var(--neg-fg, #b3261e); }
.x4-mur-pouls > span.est-jour { background: var(--accent-soft, rgba(245, 213, 71, .3)); color: var(--v2-accent, #7d640d); } .x4-mur-pouls > span.est-jour b { color: var(--v2-accent, #7d640d); }
.x4-mur-pouls > span.est-encours { background: var(--info-soft, rgba(40, 90, 160, .1)); color: var(--info-fg, #285aa0); } .x4-mur-pouls > span.est-encours b { color: var(--info-fg, #285aa0); }
.x4-mur-pouls > span.est-faite { background: var(--pos, rgba(19, 109, 69, .12)); color: var(--pos-fg, #136d45); } .x4-mur-pouls > span.est-faite b { color: var(--pos-fg, #136d45); }
.x4-mur-pouls > span.est-projet { background: var(--info-soft, rgba(40, 90, 160, .1)); color: var(--info-fg, #285aa0); } .x4-mur-pouls > span.est-projet b { color: var(--info-fg, #285aa0); }
.x4-mur-pouls > span.est-validation { background: var(--warn-soft, rgba(224, 138, 46, .14)); color: var(--warn-fg, #8a5510); } .x4-mur-pouls > span.est-validation b { color: var(--warn-fg, #8a5510); }
.x4-mur-legende { margin-left: auto; background: none !important; padding: 0 !important; font-size: 11.5px !important; color: var(--v2-text-3, #6b6f76) !important; gap: 4px !important; }
.x4-mur-legende i { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 3px; }
.x4-mur-legende i.est-retard { background: var(--neg-fg, #b3261e); } .x4-mur-legende i.est-jour { background: var(--accent-bright, #f5d547); } .x4-mur-legende i.est-avenir { background: var(--info-fg, #285aa0); } .x4-mur-legende i.est-unjour { background: var(--v2-text-3, #9a9ea6); } .x4-mur-legende i.est-faite { background: var(--pos-fg, #136d45); }

/* Les colonnes : une liste par personne, côte à côte ; le trait du haut porte sa couleur */
.x4-mur-colonnes { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; align-items: start; }
.x4-mur-colonnes[data-mur-n="1"] { --n: 1; max-width: 460px; } .x4-mur-colonnes[data-mur-n="2"] { --n: 2; } .x4-mur-colonnes[data-mur-n="3"] { --n: 3; } .x4-mur-colonnes[data-mur-n="4"] { --n: 4; } .x4-mur-colonnes[data-mur-n="5"] { --n: 5; } .x4-mur-colonnes[data-mur-n="6"] { --n: 6; }
.x4-mur-colonne { display: flex; flex-direction: column; min-height: 260px; max-height: calc(100vh - 250px); border-radius: var(--r-md, 18px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-top: 3px solid var(--perso, var(--v2-text-3, #9a9ea6)); background: var(--panel-solid, #fff); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.x4-mur-colonne.accueille { border-color: var(--accent-bright, #f5d547); box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .3)); }
.x4-mur-tete { display: flex; align-items: center; gap: 10px; padding: 11px 12px 10px 14px; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-mur-tete > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.x4-mur-tete b { font-size: 13.5px; font-weight: 680; letter-spacing: -.01em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.x4-mur-tete b i { font-style: normal; font-weight: 400; color: var(--v2-text-3, #6b6f76); }
.x4-mur-tete > div > span { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-mur-tete.est-orpheline > div > span { white-space: normal; line-height: 1.3; }
.x4-mur-compteurs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 58px; }
.x4-mur-compteurs span { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 680; font-variant-numeric: tabular-nums; background: var(--inset, rgba(0, 0, 0, .06)); color: var(--v2-text-2, #55595f); }
.x4-mur-compteurs span.est-retard { background: var(--neg-fg, #b3261e); color: #fff; }
.x4-mur-compteurs span.est-faite { background: var(--pos-fg, #136d45); color: #fff; }

/* Les projets en tête de colonne */
.x4-mur-projets { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 2px; }
.x4-mur-projet { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm, 12px); border: 1px solid var(--stroke, rgba(20, 20, 25, .1)); background: var(--inset, rgba(0, 0, 0, .03)); text-align: left; color: var(--v2-text, #16171a); cursor: pointer; font-family: inherit; letter-spacing: inherit; }
.x4-mur-projet:hover { border-color: var(--v2-text-3, #6b6f76); background: var(--panel-solid, #fff); }
.x4-mur-projet.est-cours { color: var(--info-fg, #285aa0); } .x4-mur-projet.est-validation { color: var(--warn-fg, #8a5510); } .x4-mur-projet.est-valide { color: var(--pos-fg, #136d45); } .x4-mur-projet.est-abandon { color: var(--v2-text-3, #6b6f76); }
.x4-mur-projet.est-a-moi { border-color: var(--warn-fg, #8a5510); box-shadow: 0 0 0 3px var(--warn-soft, rgba(224, 138, 46, .14)); }
.x4-mur-anneau { position: relative; flex: none; width: 40px; height: 40px; }
.x4-mur-anneau b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 680; font-variant-numeric: tabular-nums; }
.x4-mur-projet-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--v2-text, #16171a); }
.x4-mur-projet-corps b { font-size: 12.5px; font-weight: 640; line-height: 1.25; }
.x4-mur-projet-corps > span { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-mur-projet-quand.est-retard { color: var(--neg-fg, #b3261e) !important; font-weight: 620; }
.x4-mur-projet-appel { color: var(--warn-fg, #8a5510) !important; font-weight: 680; }

/* Les lignes, groupées par moment ; la colonne défile seule */
.x4-mur-papiers { flex: 1 1 auto; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 4px; }
.x4-mur-groupe { display: flex; align-items: baseline; gap: 6px; padding: 10px 14px 5px; font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-mur-groupe.est-retard { color: var(--neg-fg, #b3261e); } .x4-mur-groupe.est-jour { color: var(--v2-accent, #7d640d); } .x4-mur-groupe.est-avenir { color: var(--info-fg, #285aa0); }
.x4-mur-papier { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 9px; row-gap: 3px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); box-shadow: inset 3px 0 0 var(--liseret, transparent); background: var(--fond, transparent); color: var(--v2-text, #16171a); transition: opacity .2s, transform .2s; }
.x4-mur-groupe + .x4-mur-papier, .x4-mur-sep + .x4-mur-papier { border-top: 0; }
.x4-mur-papier.est-retard { --liseret: var(--neg-fg, #b3261e); --fond: var(--neg-soft, rgba(179, 38, 30, .06)); } .x4-mur-papier.est-jour { --liseret: var(--accent-bright, #f5d547); --fond: var(--accent-soft, rgba(245, 213, 71, .14)); } .x4-mur-papier.est-avenir { --liseret: var(--info-fg, #285aa0); } .x4-mur-papier.est-unjour { --liseret: var(--v2-text-3, #9a9ea6); } .x4-mur-papier.est-faite { --liseret: var(--pos-fg, #136d45); }
.x4-mur-papier[draggable="true"] { cursor: grab; } .x4-mur-papier.en-main { opacity: .45; cursor: grabbing; }
.x4-mur-papier.part { opacity: .2; transform: translateX(8px); }
.x4-mur-coche { grid-row: 1 / -1; align-self: start; margin-top: 1px; width: 20px; height: 20px; padding: 0; border-radius: 99px; border: 1.5px solid var(--v2-text-3, #9a9ea6); background: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .1s, background .1s; }
.x4-mur-coche:hover { border-color: var(--pos-fg, #136d45); background: var(--pos, rgba(19, 109, 69, .11)); }
.x4-mur-coche.est-cochee { border-color: transparent; background: var(--pos-fg, #136d45); }
.x4-mur-papier-texte { grid-column: 2; font-size: 13px; font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x4-mur-papier.est-faite .x4-mur-papier-texte { font-weight: 400; color: var(--v2-text-3, #6b6f76); text-decoration: line-through; }
.x4-mur-urgent { display: inline-flex; vertical-align: -1px; margin-right: 3px; color: var(--neg-fg, #b3261e); }
.x4-mur-suppr { grid-column: 3; grid-row: 1; align-self: start; width: 24px; height: 24px; margin: -3px -2px 0 0; padding: 0; border-radius: 99px; border: 0; background: none; color: var(--v2-text-3, #6b6f76); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .1s; }
.x4-mur-papier:hover .x4-mur-suppr, .x4-mur-suppr:focus-visible { opacity: 1; }
.x4-mur-suppr:hover { background: var(--neg-soft, rgba(179, 38, 30, .1)); color: var(--neg-fg, #b3261e); }
.x4-mur-note { grid-column: 2 / span 2; font-size: 11.5px; font-style: italic; color: var(--v2-text-2, #55595f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-mur-avancer { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 99px; border: 0; background: var(--inset, rgba(0, 0, 0, .05)); font: inherit; font-size: 10.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); cursor: pointer; letter-spacing: inherit; }
.x4-mur-avancer:hover { background: var(--stroke, rgba(20, 20, 25, .1)); color: var(--v2-text, #16171a); }
.x4-mur-avancer.est-25, .x4-mur-avancer.est-50, .x4-mur-avancer.est-75 { background: var(--info-soft, rgba(40, 90, 160, .1)); color: var(--info-fg, #285aa0); }
.x4-mur-jauge { display: inline-flex; gap: 2px; } .x4-mur-jauge i { display: block; width: 6px; height: 8px; border-radius: 2px; background: currentColor; opacity: .18; } .x4-mur-jauge i.est-plein { opacity: 1; }
.x4-mur-papier-pied { grid-column: 2 / span 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-mur-quand { display: inline-flex; align-items: center; gap: 4px; font-weight: 620; white-space: nowrap; }
.x4-mur-papier.est-retard .x4-mur-quand { color: var(--neg-fg, #b3261e); } .x4-mur-papier.est-jour .x4-mur-quand { color: var(--v2-accent, #7d640d); } .x4-mur-papier.est-avenir .x4-mur-quand { color: var(--info-fg, #285aa0); } .x4-mur-papier.est-faite .x4-mur-quand { color: var(--pos-fg, #136d45); }
.x4-mur-fiche, .x4-mur-doc { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; height: 20px; padding: 0 7px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .12)); background: var(--panel-solid, #fff); font: inherit; font-size: 10.5px; font-weight: 620; color: var(--v2-text-2, #55595f); text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: inherit; }
.x4-mur-fiche:hover, .x4-mur-doc:hover { border-color: var(--v2-text-3, #6b6f76); color: var(--v2-text, #16171a); }
.x4-mur-de { font-style: italic; }
.x4-mur-plus { display: block; margin: 6px auto 4px; height: 26px; padding: 0 12px; border-radius: 99px; border: 1px dashed var(--stroke, rgba(20, 20, 25, .2)); background: none; font: inherit; font-size: 11.5px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; letter-spacing: inherit; }
.x4-mur-plus:hover { border-style: solid; color: var(--v2-text, #16171a); }
.x4-mur-sep { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 10px 14px 5px; border: 0; background: none; font-family: inherit; font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--pos-fg, #136d45); cursor: pointer; text-align: left; }
.x4-mur-sep:hover { text-decoration: underline; }
.x4-mur-rien { padding: 18px 14px; font-size: 12px; color: var(--v2-text-3, #6b6f76); text-align: center; }

/* Ajouter au bas d'une colonne */
.x4-mur-ajout { padding: 8px 10px 10px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-mur-ajout input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px dashed var(--stroke, rgba(20, 20, 25, .2)); background: var(--inset, rgba(0, 0, 0, .03)); font-family: inherit; font-size: 12.5px; color: var(--v2-text, #16171a); letter-spacing: inherit; }
.x4-mur-ajout input:focus { outline: 0; border-style: solid; border-color: var(--accent-bright, #f5d547); background: var(--panel-solid, #fff); box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .3)); }

@media (max-width: 1240px) { .x4-mur-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x4-mur-legende { display: none; } }
.x4-mur-papier-pied .x4-crit-chip { height: 24px; padding: 0 7px 0 2px; font-size: 10.5px; }
.x4-mur-papier-pied .x4-crit-chip .x4-crit, .x4-mur-papier-pied .x4-crit-chip .x4-crit.est-jaune, .x4-mur-papier-pied .x4-crit-chip .x4-crit.est-rouge { width: 20px; height: 20px; }
.x4-mur-papier-pied .x4-crit-chip .x4-crit::after { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.x4-mur-projet-corps .x4-crit { width: 8px; height: 8px; margin-right: 5px; }

/* ── Maquettes du 25/09/2026 : une colonne par personne, des lignes simples — plus de post-it, de liserés ni de chiffres ── */
.x4-mur-pouls { display: none; }
.x4-mur-colonne { padding: 0; background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04)); overflow: hidden; }
.x4-mur-colonne.accueille { border-color: var(--accent-bright, #f5d547); box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .3)); }
.x4-mur-tete { margin: 0; padding: 14px 16px 12px; gap: 10px; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); background: none; }
.x4-mur-tete b { font-size: 14px; font-weight: 680; }
.x4-mur-tete i { font-style: normal; font-weight: 550; color: var(--v2-text-3, #6b6f76); }
.x4-mur-tete-n { display: block; margin-top: 1px; font-size: 12px; font-weight: 620; color: var(--v2-text-2, #55595f); }
.x4-mur-tete-n.est-retard { color: var(--neg-fg, #b3261e); }
.x4-mur-compteurs { display: none; }
.x4-mur-papiers { padding: 0; gap: 0; }
.x4-mur-groupe { margin: 0; padding: 10px 14px 4px; font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-mur-groupe.est-retard { color: var(--neg-fg, #b3261e); }
.x4-mur-groupe.est-jour { color: var(--v2-text, #16171a); }
.x4-mur-papier { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 10px 9px 14px; border: 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); border-left: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.x4-mur-papier.est-retard, .x4-mur-papier.est-jour, .x4-mur-papier.est-avenir, .x4-mur-papier.est-unjour, .x4-mur-papier.est-faite { background: none; border-left: 0; box-shadow: none; }
.x4-mur-papier:hover { background: var(--inset, rgba(0, 0, 0, .025)); }
.x4-mur-papier > .x4-crit { flex: none; width: 6px; height: 6px; margin: 0 -2px 0 -2px; }
.x4-mur-papier > .x4-crit.est-vert, .x4-mur-papier > .x4-crit.est-vide { opacity: 0; background: var(--v2-text-3, #6b6f76); }
.x4-mur-papier:hover > .x4-crit.est-vert { opacity: .35; }
.x4-mur-papier.est-retard .x4-mur-coche { border-color: var(--neg-fg, #b3261e); }
.x4-mur-papier-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.x4-mur-papier-texte { font-size: 13px; font-weight: 620; line-height: 1.3; color: var(--v2-text, #16171a); }
.x4-mur-papier.est-faite .x4-mur-papier-texte { font-weight: 400; color: var(--v2-text-3, #6b6f76); text-decoration: line-through; }
.x4-mur-note { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-mur-papier-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-mur-papier-pied:empty { display: none; }
.x4-mur-fiche { padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); cursor: pointer; letter-spacing: inherit; }
.x4-mur-fiche:hover { text-decoration: underline; text-underline-offset: 3px; }
.x4-mur-de { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-mur-doc { display: inline-flex; align-items: center; gap: 3px; color: var(--v2-text-3, #6b6f76); text-decoration: none; font-size: 11px; }
.x4-mur-avancer { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border: 0; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .045)); color: var(--v2-text-3, #6b6f76); cursor: pointer; opacity: 0; }
.x4-mur-avancer.est-25, .x4-mur-avancer.est-50, .x4-mur-avancer.est-75 { opacity: 1; color: var(--info-fg, #285aa0); background: var(--info-soft, rgba(40, 90, 160, .1)); }
.x4-mur-papier:hover .x4-mur-avancer { opacity: 1; }
.x4-mur-quand { flex: none; margin: 0; padding: 0; background: none; font-size: 11.5px; font-weight: 640; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-mur-papier.est-retard .x4-mur-quand { color: var(--neg-fg, #b3261e); }
.x4-mur-papier.est-jour .x4-mur-quand { color: var(--v2-text, #16171a); }
.x4-mur-papier.est-avenir .x4-mur-quand, .x4-mur-papier.est-unjour .x4-mur-quand { color: var(--v2-text-3, #6b6f76); font-weight: 550; }
.x4-mur-papier.est-faite .x4-mur-quand { color: var(--pos-fg, #136d45); }
.x4-mur-suppr { flex: none; opacity: 0; }
.x4-mur-papier:hover .x4-mur-suppr, .x4-mur-suppr:focus-visible { opacity: 1; }
.x4-mur-plus, .x4-mur-sep { margin: 4px 14px 8px; }
.x4-mur-rien { padding: 16px 14px; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-mur-ajout { padding: 8px 10px 12px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); }