/* ─── Projets : confiés, suivis, validés par tous (17/09/2026) ───
   Onglet « Projets » de l'écran Tâches. Le bandeau rouge-orangé dit ce
   qu'on attend de MOI ; la fiche d'un projet met ma décision en tête. */
.x4-projets { display: flex; flex-direction: column; gap: 16px; }
.x4-projets button, .x4-projets input, .x4-projets select, .x4-projets textarea { letter-spacing: inherit; font-family: inherit; }

/* Le bandeau : une validation est attendue (affiché par v4/todo.js, au-dessus des onglets) */
.x4-projets-bandeau { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-md, 18px); background: var(--warn-soft, rgba(224, 138, 46, .12)); border: 1px solid var(--warn-fg, #8a5510); color: var(--v2-text, #16171a); }
.x4-projets-bandeau-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 99px; background: var(--warn-fg, #8a5510); color: #fff; }
.x4-projets-bandeau > div:nth-child(2) { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.x4-projets-bandeau b { font-size: 14px; font-weight: 680; }
.x4-projets-bandeau > div > span { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-bandeau-liens { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.x4-projets-bandeau-liens button { height: 32px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--v2-text, #16171a); color: var(--panel-solid, #fff); font-size: 12.5px; font-weight: 640; cursor: pointer; white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }

/* La liste */
.x4-projets-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.x4-projets-tete p { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.5; color: var(--v2-text-2, #55595f); }
.x4-projets-tete p b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-projets-g { display: flex; flex-direction: column; gap: 8px; }
.x4-projets-g h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 0 4px; font-size: 11.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-projets-g h3 span { font-weight: 550; letter-spacing: 0; opacity: .8; }
.x4-projets-g h3 em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }
/* ── Le pouls et les cartes (23/09/2026 : « au premier abord, plus visuel ») ──
   Un anneau d'avancement, un trait de couleur qui dit l'état : bleu en cours,
   rouge en retard, ambre en validation, vert validé, gris abandonné. */
.x4-projets-pouls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x4-projets-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-projets-pouls > span b { font-size: 15px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text, #16171a); font-variant-numeric: tabular-nums; }
.x4-projets-pouls > span.est-cours { background: var(--info-soft, rgba(40, 90, 160, .1)); color: var(--info-fg, #285aa0); } .x4-projets-pouls > span.est-cours b { color: var(--info-fg, #285aa0); }
.x4-projets-pouls > span.est-retard { background: var(--neg-soft, rgba(179, 38, 30, .1)); color: var(--neg-fg, #b3261e); } .x4-projets-pouls > span.est-retard b { color: var(--neg-fg, #b3261e); }
.x4-projets-pouls > span.est-validation { background: var(--warn-soft, rgba(224, 138, 46, .14)); color: var(--warn-fg, #8a5510); } .x4-projets-pouls > span.est-validation b { color: var(--warn-fg, #8a5510); }
.x4-projets-pouls > span.est-valide { background: var(--pos, rgba(19, 109, 69, .12)); color: var(--pos-fg, #136d45); } .x4-projets-pouls > span.est-valide b { color: var(--pos-fg, #136d45); }
.x4-projets-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.x4-projets-carte { --ton: var(--info-fg, #285aa0); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 13px 16px 13px; border-radius: var(--r-md, 18px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-top: 4px solid var(--perso, var(--ton)); background: var(--panel-solid, #fff); text-align: left; color: var(--v2-text, #16171a); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.x4-projets-carte:hover { border-color: var(--v2-text-3, #6b6f76); border-top-color: var(--perso, var(--ton)); transform: translateY(-1px); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .4); }
.x4-projets-carte.est-retard { --ton: var(--neg-fg, #b3261e); } .x4-projets-carte.est-validation { --ton: var(--warn-fg, #8a5510); } .x4-projets-carte.est-valide { --ton: var(--pos-fg, #136d45); } .x4-projets-carte.est-abandon { --ton: var(--v2-text-3, #9a9ea6); }
.x4-projets-carte.est-a-moi { box-shadow: 0 0 0 3px var(--warn-soft, rgba(224, 138, 46, .14)); }
.x4-projets-carte-haut { display: flex; align-items: center; gap: 12px; }
.x4-projets-anneau { position: relative; flex: none; width: 54px; height: 54px; color: var(--ton); }
.x4-projets-anneau b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text, #16171a); }
.x4-projets-anneau b i { font-style: normal; font-size: 9px; font-weight: 640; margin-left: 1px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-carte-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.x4-projets-carte-id > b { font-size: 14.5px; font-weight: 640; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x4-projets-carte-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 620; color: var(--ton); }
.x4-projets-puce { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--ton); }
.x4-projets-carte-etat .x4-projets-points { display: inline-flex; flex-direction: row; margin-left: 2px; }
.x4-projets-carte-qui { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-projets-carte .x4-projets-frise { margin: 6px 0 12px; }
.x4-projets-carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.x4-projets-carte-pied .x4-projets-quand { margin-left: 0; }
.x4-projets-note b.est-neg { color: var(--neg-fg, #b3261e); font-weight: 620; }
.x4-projets-carte .x4-projets-prochaine { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035)); font-size: 12.5px; color: var(--v2-text, #16171a); }
.x4-projets-carte .x4-projets-prochaine em { font-style: normal; font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-projets-carte .x4-projets-prochaine b { font-weight: 620; color: var(--v2-text, #16171a); }
.x4-projets-carte .x4-projets-prochaine span { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-carte .x4-projets-prochaine.est-retard { background: var(--neg-soft, rgba(179, 38, 30, .07)); } .x4-projets-carte .x4-projets-prochaine.est-retard span { color: var(--neg-fg, #b3261e); font-weight: 620; }
.x4-projets-g.est-a-moi h3 { color: var(--warn-fg, #8a5510); }
.x4-projets-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .06)); font-size: 10px; font-weight: 680; color: var(--v2-text-2, #55595f); }
.x4-projets-quand { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 620; white-space: nowrap; }
.x4-projets-quand.est-neg { color: var(--neg-fg, #b3261e); }
.x4-projets-quand.est-attention { color: var(--warn-fg, #8a5510); }
.x4-projets-note { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-note.est-attention { color: var(--warn-fg, #8a5510); font-weight: 620; }
.x4-projets-barre { flex: 1 1 90px; max-width: 150px; height: 6px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .07)); overflow: hidden; }
.x4-projets-barre i { display: block; height: 100%; border-radius: 99px; background: var(--pos-fg, #136d45); transition: width .25s; }
.x4-projets-pct { font-weight: 640; color: var(--v2-text, #16171a); font-variant-numeric: tabular-nums; }
.x4-projets-points { display: inline-flex; gap: 3px; margin-left: auto; }
.x4-projets-points i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 99px; border: 1px dashed var(--stroke, rgba(20, 20, 25, .25)); font-style: normal; font-size: 9px; font-weight: 680; color: var(--v2-text-3, #6b6f76); }
.x4-projets-points i.est-oui { border: 0; background: var(--pos-fg, #136d45); color: #fff; box-shadow: 0 0 0 2px var(--pos-fg, #136d45); }
.x4-projets-points i.est-non { border: 0; background: var(--neg-fg, #b3261e); color: #fff; box-shadow: 0 0 0 2px var(--neg-fg, #b3261e); }
.x4-projets-points i .av, .x4-projets-avatar.av { overflow: hidden; }
.x4-projets-appel { font-size: 12.5px; font-weight: 680; color: var(--warn-fg, #8a5510); }
.x4-projets-statut { flex: none; padding: 3px 10px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .045)); font-size: 11.5px; font-weight: 620; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-projets-statut[data-ton="accent"] { background: var(--warn-soft, rgba(224, 138, 46, .12)); color: var(--warn-fg, #8a5510); }
.x4-projets-statut[data-ton="pos"] { background: var(--pos, rgba(19, 109, 69, .11)); color: var(--pos-fg, #136d45); }
.x4-projets-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 38px 24px; border-radius: var(--r-md, 18px); border: 1px dashed var(--stroke, rgba(20, 20, 25, .14)); text-align: center; }
.x4-projets-vide b { font-size: 14.5px; font-weight: 640; }
.x4-projets-vide span { max-width: 520px; font-size: 12.5px; line-height: 1.5; color: var(--v2-text-3, #6b6f76); }

/* Les boutons */
.x4-projets-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .16)); background: var(--panel-solid, #fff); font-size: 13px; font-weight: 620; color: var(--v2-text, #16171a); cursor: pointer; white-space: nowrap; }
.x4-projets-btn:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-projets-btn.est-plein { border-color: transparent; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
.x4-projets-btn.est-non { border-color: transparent; background: var(--neg-soft, rgba(179, 38, 30, .1)); color: var(--neg-fg, #b3261e); }
.x4-projets-btn.est-grand { height: 42px; padding: 0 22px; font-size: 14px; font-weight: 640; }
.x4-projets-btn:disabled { opacity: .5; cursor: default; }
.x4-projets-lien { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.x4-projets-lien.est-non { color: var(--neg-fg, #b3261e); }
.x4-projets-aide { font-size: 12px; color: var(--v2-text-3, #6b6f76); }

/* Le formulaire « nouveau projet » */
.x4-projets-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--r-md, 18px); background: var(--panel-solid, #fff); border: 1px solid var(--accent-bright, #f5d547); box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-projets-form h3 { margin: 0; font-size: 15px; font-weight: 680; }
.x4-projets-form label, .x4-projets-form-qui { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 620; color: var(--v2-text-2, #55595f); }
.x4-projets-form label i, .x4-projets-form-qui i { font-style: normal; font-weight: 400; color: var(--v2-text-3, #6b6f76); }
.x4-projets-form-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.x4-projets-form-qui > div { display: flex; gap: 6px; flex-wrap: wrap; }
.x4-projets-form-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x4-projets input[type="text"], .x4-projets input[type="date"], .x4-projets select, .x4-projets textarea { padding: 9px 11px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .16)); background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font-size: 13.5px; font-weight: 400; }
.x4-projets textarea { line-height: 1.5; resize: vertical; }
.x4-projets input:focus, .x4-projets select:focus, .x4-projets textarea:focus { outline: 2px solid var(--accent-bright, #f5d547); outline-offset: -1px; }
.x4-projets-choix { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px dashed var(--stroke, rgba(20, 20, 25, .2)); background: none; font-size: 12.5px; font-weight: 550; color: var(--v2-text-3, #6b6f76); cursor: pointer; text-decoration: line-through; }
.x4-projets-choix.est-actif { border: 1px solid transparent; background: var(--pos, rgba(19, 109, 69, .11)); color: var(--pos-fg, #136d45); font-weight: 620; text-decoration: none; }

/* La fiche d'un projet */
.x4-projets-fiche { display: flex; flex-direction: column; gap: 14px; }
.x4-projets-fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.x4-projets-retour { padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 640; color: var(--v2-accent, #7d640d); cursor: pointer; }
.x4-projets-retour:hover { text-decoration: underline; }
.x4-projets-titre { margin: -6px 0 0; font-size: 24px; font-weight: 680; letter-spacing: -.025em; line-height: 1.2; }
.x4-projets-titre[data-projets-renommer] { cursor: text; }
.x4-projets-titre-edit { width: 100%; margin-top: -6px; font-size: 22px !important; font-weight: 680 !important; }
.x4-projets-meta { margin: -8px 0 0; font-size: 13px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-meta b { font-weight: 640; color: var(--v2-text, #16171a); }

.x4-projets-decision { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-md, 18px); background: var(--warn-soft, rgba(224, 138, 46, .12)); border: 1px solid var(--warn-fg, #8a5510); }
.x4-projets-decision h3 { margin: 0; font-size: 16px; font-weight: 680; }
.x4-projets-decision p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--v2-text-2, #55595f); }
.x4-projets-decision-pied { display: flex; gap: 8px; flex-wrap: wrap; }
.x4-projets blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent-bright, #f5d547); border-radius: var(--r-xs, 9px); background: var(--panel-solid, #fff); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }

.x4-projets-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.x4-projets-du.est-doux { font-weight: 400; color: var(--v2-text-3, #6b6f76); }
.x4-projets-tuile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-md, 18px); background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-projets-tuile > span { font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-projets-tuile > b { font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.x4-projets-tuile > em { font-style: normal; font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-tuile.est-neg > em, .x4-projets-tuile.est-neg > b { color: var(--neg-fg, #b3261e); }
.x4-projets-tuile.est-attention > em { color: var(--warn-fg, #8a5510); font-weight: 620; }
.x4-projets-tuile input[type="date"] { align-self: flex-start; font-size: 15px; font-weight: 640; }
.x4-projets-tuile .x4-projets-barre { flex: none; max-width: none; width: 100%; height: 8px; margin: 8px 0 3px; }
.x4-projets-crans { display: flex; gap: 4px; }
.x4-projets-crans button { flex: 1 1 0; height: 30px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .12)); background: none; font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); cursor: pointer; font-variant-numeric: tabular-nums; }
.x4-projets-crans button:hover { border-color: var(--pos-fg, #136d45); }
.x4-projets-crans button.est-plein { border-color: transparent; background: var(--pos, rgba(19, 109, 69, .15)); color: var(--pos-fg, #136d45); }
.x4-projets-crans button.est-la { border-color: transparent; background: var(--pos-fg, #136d45); color: #fff; }
.x4-projets-report { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); }
.x4-projets-report b { font-size: 13px; font-weight: 640; }
.x4-projets-report > div { display: flex; gap: 6px; flex-wrap: wrap; }

.x4-projets-bloc, .x4-projets-soumettre { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--r-md, 18px); background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-projets-bloc h3, .x4-projets-soumettre h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 11.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-projets-bloc h3 span { font-weight: 550; letter-spacing: 0; text-transform: none; }
.x4-projets-soumettre { border-color: var(--accent-bright, #f5d547); align-items: flex-start; }
.x4-projets-soumettre textarea { align-self: stretch; }
.x4-projets-soumettre p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--v2-text-2, #55595f); }
.x4-projets-soumettre p b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-projets-texte { margin: 0; font-size: 14px; line-height: 1.55; }
.x4-projets-rien { margin: 0; font-size: 13px; color: var(--v2-text-3, #6b6f76); }

.x4-projets-actions { display: flex; flex-direction: column; }
.x4-projets-action { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-projets-action:first-child { border-top: 0; }
.x4-projets-case { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 99px; border: 1.5px solid var(--v2-text-3, #9a9ea6); background: none; color: #fff; }
button.x4-projets-case { cursor: pointer; }
button.x4-projets-case:hover { border-color: var(--pos-fg, #136d45); background: var(--pos, rgba(19, 109, 69, .11)); }
.x4-projets-case.est-cochee { border-color: transparent; background: var(--pos-fg, #136d45); }
.x4-projets-action-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 550; }
.x4-projets-action:not(.est-faite) .x4-projets-action-txt { font-weight: 400; color: var(--v2-text-2, #55595f); }
.x4-projets-action-date { flex: none; font-size: 12px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-projets-action.est-faite .x4-projets-action-date { color: var(--pos-fg, #136d45); }
.x4-projets-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; border: 0; background: none; color: var(--v2-text-3, #6b6f76); cursor: pointer; opacity: 0; }
.x4-projets-action:hover .x4-projets-x, .x4-projets-x:focus-visible { opacity: 1; }
.x4-projets-x:hover { background: var(--neg-soft, rgba(179, 38, 30, .1)); color: var(--neg-fg, #b3261e); }
.x4-projets-ajout { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--stroke, rgba(20, 20, 25, .14)); }
.x4-projets-ajout input[type="text"] { flex: 1 1 320px; }
.x4-projets-bascule { display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .045)); }
.x4-projets-bascule button { height: 28px; padding: 0 12px; border-radius: 99px; border: 0; background: none; font-size: 12px; font-weight: 550; color: var(--v2-text-2, #55595f); cursor: pointer; }
.x4-projets-bascule button.est-actif { background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font-weight: 640; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); }

.x4-projets-valideurs { display: flex; flex-direction: column; }
.x4-projets-valideur { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); font-size: 13px; }
.x4-projets-valideur:first-child { border-top: 0; }
.x4-projets-valideur b { font-weight: 620; }
.x4-projets-valideur > span:last-child { margin-left: auto; color: var(--v2-text-3, #6b6f76); text-align: right; }
.x4-projets-valideur.est-oui > span:last-child { color: var(--pos-fg, #136d45); font-weight: 620; }
.x4-projets-valideur.est-non > span:last-child { color: var(--neg-fg, #b3261e); }
.x4-projets-valideur.est-oui .x4-projets-avatar { background: var(--pos-fg, #136d45); color: #fff; }
.x4-projets-valideur.est-non .x4-projets-avatar { background: var(--neg-fg, #b3261e); color: #fff; }

.x4-projets-mot input { width: 100%; box-sizing: border-box; }
.x4-projets-journal { display: flex; flex-direction: column; }
.x4-projets-ligne { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-ligne:first-child { border-top: 0; }
.x4-projets-ligne > span:first-child { color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-projets-ligne b { font-weight: 620; color: var(--v2-text, #16171a); }
.x4-projets-ligne i { font-style: normal; color: var(--v2-text, #16171a); }
.x4-projets-ligne.est-mot i { font-weight: 550; }
.x4-projets-pied { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 4px 0; }

@media (max-width: 1100px) { .x4-projets-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x4-projets-form-deux { grid-template-columns: 1fr; } }

/* ── 18/09 : équipe, frise, plan daté, mode « Faire le point » ── */
.x4-projets-tete-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.x4-projets-avatars { display: inline-flex; align-items: center; }
.x4-projets-avatars .x4-projets-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel-solid, #fff); }
.x4-projets-avatars .x4-projets-avatar:first-child { margin-left: 0; }
.x4-projets-avatar.est-pilote { background: var(--v2-text, #16171a); color: var(--panel-solid, #fff); }
.x4-projets-avatar.est-petit { width: 20px; height: 20px; font-size: 9px; flex: none; }
.x4-projets-equipe { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-projets-equipe b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-projets-equipe .x4-projets-lien { margin-left: 6px; font-size: 12px; }
.x4-projets-form-qui.est-inline { padding: 10px 12px; border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-projets-prochaine { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-prochaine b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-projets-prochaine.est-retard { color: var(--neg-fg, #b3261e); }
.x4-projets-note b.est-retard { color: var(--neg-fg, #b3261e); font-weight: 640; }

/* La frise */
.x4-projets-frise { position: relative; height: 30px; margin: 10px 0 14px; padding: 0 2px; }
.x4-projets-frise-barre { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .08)); overflow: hidden; }
.x4-projets-frise-barre i { display: block; height: 100%; border-radius: 99px; background: var(--stroke, rgba(20, 20, 25, .18)); }
.x4-projets-frise-pt { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 99px; border: 2px solid var(--info-fg, #285aa0); background: var(--panel-solid, #fff); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #fff; z-index: 2; }
.x4-projets-frise-pt.est-faite { border-color: var(--pos-fg, #136d45); background: var(--pos-fg, #136d45); }
.x4-projets-frise-pt.est-retard { border-color: var(--neg-fg, #b3261e); background: var(--neg-soft, rgba(179, 38, 30, .2)); }
.x4-projets-frise-auj { position: absolute; top: 4px; width: 2px; height: 22px; margin-left: -1px; background: var(--v2-accent, #7d640d); z-index: 1; }
.x4-projets-frise-auj b { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--v2-accent, #7d640d); white-space: nowrap; }
.x4-projets-frise-borne { position: absolute; top: 24px; display: flex; flex-direction: column; font-size: 10px; color: var(--v2-text-3, #6b6f76); line-height: 1.2; }
.x4-projets-frise-borne b { font-weight: 640; color: var(--v2-text-2, #55595f); font-size: 10.5px; }
.x4-projets-frise-borne.est-debut { left: 0; } .x4-projets-frise-borne.est-fin { right: 0; text-align: right; }
.x4-projets-frise-borne.est-retard b { color: var(--neg-fg, #b3261e); }
.x4-projets-carte .x4-projets-frise { height: 22px; margin: 6px 0 22px; }
.x4-projets-carte .x4-projets-frise-auj b { display: none; }
/* la grande frise : les étapes écrites, en haut et en bas en alternance */
.x4-projets-frise.est-grande { height: 210px; margin: 14px 0 4px; padding: 0; }
.x4-projets-frise.est-grande .x4-projets-frise-barre { top: 100px; height: 8px; }
.x4-projets-frise.est-grande .x4-projets-frise-pt { top: 96px; width: 16px; height: 16px; margin-left: -8px; border-width: 2.5px; }
.x4-projets-frise.est-grande .x4-projets-frise-auj { top: 14px; height: 100px; opacity: .7; }
.x4-projets-frise.est-grande .x4-projets-frise-auj b { top: -14px; opacity: 1; }
.x4-projets-frise.est-grande .x4-projets-frise-borne { top: 112px; }
.x4-projets-frise.est-grande .x4-projets-frise-borne.est-debut { transform: translateX(-50%); } .x4-projets-frise.est-grande .x4-projets-frise-borne.est-fin { transform: translateX(50%); }
.x4-projets-frise-pt em { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 140px; font-style: normal; text-align: center; color: var(--v2-text, #16171a); }
.x4-projets-frise-pt em b { font-size: 11.5px; font-weight: 640; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x4-projets-frise-pt em span { font-size: 10.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-projets-frise-pt.est-haut em { bottom: 22px; } .x4-projets-frise-pt.est-bas em { top: 34px; } .x4-projets-frise-pt.est-haut2 em { bottom: 64px; } .x4-projets-frise-pt.est-bas2 em { top: 76px; }
.x4-projets-frise-pt.est-haut::after, .x4-projets-frise-pt.est-bas::after, .x4-projets-frise-pt.est-haut2::after, .x4-projets-frise-pt.est-bas2::after { content: ''; position: absolute; left: 50%; width: 1px; background: var(--stroke, rgba(20, 20, 25, .3)); }
.x4-projets-frise-pt.est-haut::after { bottom: 100%; height: 9px; } .x4-projets-frise-pt.est-bas::after { top: 100%; height: 21px; } .x4-projets-frise-pt.est-haut2::after { bottom: 100%; height: 51px; } .x4-projets-frise-pt.est-bas2::after { top: 100%; height: 63px; }
.x4-projets-frise-pt.est-retard em b { color: var(--neg-fg, #b3261e); }

/* Le plan : date et qui, sur chaque étape ; le formulaire des premières étapes */
.x4-projets-action.est-retard .x4-projets-action-txt { color: var(--neg-fg, #b3261e); }
.x4-projets-action-date-champ { flex: none; width: 140px; padding: 4px 8px !important; font-size: 12px !important; }
.x4-projets-ajout select { flex: none; padding: 8px 10px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .16)); background: var(--panel-solid, #fff); font-family: inherit; font-size: 13px; color: var(--v2-text, #16171a); }
.x4-projets-form-etapes { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 620; color: var(--v2-text-2, #55595f); }
.x4-projets-form-etapes i { font-style: normal; font-weight: 400; color: var(--v2-text-3, #6b6f76); }
.x4-projets-form-etape { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px 28px; gap: 6px; align-items: center; }
.x4-projets-form-etape .x4-projets-x { opacity: 1; }
.x4-projets-form-etapes .x4-projets-lien { align-self: flex-start; margin-top: 2px; }

/* « Faire le point » : plein écran, propre, imprimable */
.x4-projets-point { position: fixed; inset: 0; z-index: var(--z-modale, 200); overflow: auto; padding: 32px clamp(20px, 5vw, 70px) 80px; background: var(--fond, var(--bg, #f6f5f1)); color: var(--v2-text, #16171a); }
.x4-projets-point-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 26px; padding-bottom: 18px; border-bottom: 2px solid var(--v2-text, #16171a); }
.x4-projets-point-sur { display: block; font-size: 12px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-projets-point-tete h2 { margin: 2px 0 0; font-size: 34px; font-weight: 680; letter-spacing: -.03em; line-height: 1.1; text-transform: capitalize; }
.x4-projets-point-tete p { margin: 6px 0 0; font-size: 14px; color: var(--v2-text-2, #55595f); }
.x4-projets-point-btns { display: flex; gap: 8px; }
.x4-projets-point-projet { max-width: 1180px; margin: 0 auto 18px; padding: 22px 26px 20px; border-radius: var(--r-md, 18px); background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); break-inside: avoid; }
.x4-projets-point-projet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.x4-projets-point-projet h3 { margin: 0; font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.x4-projets-point-projet header p { margin: 4px 0 0; font-size: 13.5px; color: var(--v2-text-2, #55595f); max-width: 70ch; }
.x4-projets-point-equipe { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-projets-point-equipe b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-projets-point-chiffres { display: flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 14px; }
.x4-projets-point-chiffres span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-point-chiffres span b { font-size: 24px; font-weight: 680; letter-spacing: -.03em; color: var(--v2-text, #16171a); font-variant-numeric: tabular-nums; }
.x4-projets-point-chiffres span.est-neg b, .x4-projets-point-chiffres span.est-retard b { color: var(--neg-fg, #b3261e); }
.x4-projets-point-chiffres span.est-attention b { color: var(--warn-fg, #8a5510); }
.x4-projets-point-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 14px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); }
.x4-projets-point-colonnes h4 { margin: 0 0 6px; font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-projets-point-colonnes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.x4-projets-point-colonnes li { display: flex; flex-direction: column; font-size: 13px; }
.x4-projets-point-colonnes li b { font-weight: 620; }
.x4-projets-point-colonnes li span { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-point-colonnes li.est-retard b { color: var(--neg-fg, #b3261e); }
.x4-projets-point-colonnes p { margin: 0; font-size: 13px; color: var(--v2-text-3, #6b6f76); }
@media print {
  body.x4-projets-point-ouvert > *:not(#app):not(.app):not(main) { visibility: hidden; }
  body.x4-projets-point-ouvert .x4-projets-point, body.x4-projets-point-ouvert .x4-projets-point * { visibility: visible; }
  .x4-projets-point { position: static; padding: 0; background: #fff; }
  .x4-projets-point-btns { display: none; }
  .x4-projets-point-projet { box-shadow: none; border-color: #ccc; }
}
@media (max-width: 1100px) { .x4-projets-point-colonnes { grid-template-columns: 1fr; } .x4-projets-form-etape { grid-template-columns: minmax(0, 1fr) 130px 100px 28px; } }

/* ── 18/09 : le point du mois, les documents ── */
.x4-projets-bloc.est-du { border-color: var(--warn-fg, #8a5510); box-shadow: 0 0 0 3px var(--warn-soft, rgba(224, 138, 46, .14)); }
.x4-projets-du { margin: 0; font-size: 13px; line-height: 1.5; color: var(--v2-text-2, #55595f); }
.x4-projets-du b { color: var(--warn-fg, #8a5510); font-weight: 680; }
.x4-projets-points { display: flex; flex-direction: column; }
.x4-projets-point-note { display: grid; grid-template-columns: 150px 130px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); font-size: 13px; }
.x4-projets-point-note:first-child { border-top: 0; }
.x4-projets-point-note > span:first-child { color: var(--v2-text-3, #6b6f76); }
.x4-projets-point-note b { font-weight: 620; }
.x4-projets-point-note > span:last-child { white-space: pre-wrap; }
.x4-projets-ajout.est-point { flex-direction: column; align-items: stretch; }
.x4-projets-ajout.est-point .x4-projets-btn { align-self: flex-start; }
.x4-projets-appel.est-point { display: inline-flex; align-items: center; gap: 5px; }
.x4-projets-docs { display: flex; flex-direction: column; }
.x4-projets-doc { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); font-size: 13px; }
.x4-projets-doc:first-child { border-top: 0; }
.x4-projets-doc a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--v2-text, #16171a); text-decoration: none; }
.x4-projets-doc a b { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-projets-doc a:hover b { text-decoration: underline; }
.x4-projets-doc > span { margin-left: auto; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-projets-doc .x4-projets-x { opacity: 1; }
.x4-projets-point-mensuel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035)); font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-point-mensuel.est-du { background: var(--warn-soft, rgba(224, 138, 46, .14)); color: var(--warn-fg, #8a5510); font-weight: 620; }
.x4-projets-point-mensuel > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.x4-projets-point-noter { flex: 1 1 320px; }
.x4-projets-point-noter input { width: 100%; box-sizing: border-box; }
.x4-projets-carte-id > b .x4-crit, .x4-projets-titre .x4-crit { margin-right: 7px; }
.x4-projets-crit-ligne { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-crit-ligne > span:first-child { font-weight: 640; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.x4-projets-crit-ligne b { font-weight: 620; color: var(--v2-text, #16171a); }
/* Les projets par pilote, à sa couleur (23/09/2026) */
.x4-projets-g.est-pilote h3 { align-items: center; gap: 9px; padding: 0 2px 8px; border-bottom: 2px solid var(--perso, var(--stroke, rgba(20, 20, 25, .1))); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--v2-text, #16171a); }
.x4-projets-g.est-pilote h3 b { font-weight: 680; }
.x4-projets-g.est-pilote h3 span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .06)); font-size: 11.5px; font-weight: 680; opacity: 1; color: var(--v2-text-2, #55595f); }
.x4-projets-g.est-pilote h3 em { font-size: 12px; color: var(--v2-text-3, #6b6f76); }

/* ── Maquettes du 25/09/2026 : un projet par ligne, la couleur du pilote sur le bord — plus d'anneaux, de frises ni de blocs par pilote ── */
.x4-projets-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.x4-projets-tete-compte { margin-right: auto; font-size: 13px; font-weight: 550; color: var(--v2-text-2, #55595f); }
.x4-projets-tete-btns { margin-left: auto; display: inline-flex; gap: 8px; }
.x4-projets-liste { display: flex; flex-direction: column; gap: 10px; }
.x4-projets-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 190px; align-items: center; gap: 24px; width: 100%; padding: 14px 20px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-left: 4px solid var(--perso, var(--v2-text-3, #6b6f76)); border-radius: var(--r-md, 18px); background: var(--panel-solid, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04)); font: inherit; color: inherit; text-align: left; cursor: pointer; letter-spacing: inherit; }
.x4-projets-ligne:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .17)); border-left-color: var(--perso, var(--v2-text-3, #6b6f76)); }
.x4-projets-ligne.est-a-moi { background: var(--accent-soft, rgba(245, 213, 71, .2)); }
.x4-projets-ligne-quoi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.x4-projets-ligne-quoi > b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 680; line-height: 1.25; }
.x4-projets-ligne-qui { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-ligne-suite { font-size: 13px; color: var(--v2-text, #16171a); }
.x4-projets-ligne-suite em { margin-right: 6px; font-style: normal; color: var(--v2-text-3, #6b6f76); }
.x4-projets-ligne-suite.est-retard { color: var(--neg-fg, #b3261e); }
.x4-projets-ligne-appel { font-size: 13px; font-weight: 640; color: var(--v2-accent, #7d640d); }
.x4-projets-ligne-av { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.x4-projets-ligne-barre { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-projets-ligne-barre .x4-projets-barre { flex: 1 1 auto; height: 6px; }
.x4-projets-ligne-barre .est-neg { color: var(--neg-fg, #b3261e); font-weight: 640; }
.x4-projets-ligne-debut { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-ligne-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.x4-projets-ligne-fin > b { font-size: 13px; font-weight: 640; }
.x4-projets-ligne-fin > b.est-neg { color: var(--neg-fg, #b3261e); }
.x4-projets-ligne-fin > b.est-attention { color: var(--v2-accent, #7d640d); }
.x4-projets-ligne-fin > span { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-projets-chip { display: inline-block; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .05)); font-style: normal; font-size: 11px; font-weight: 640; line-height: 22px; color: var(--v2-text-2, #55595f); }
.x4-projets-chip.est-cours { background: var(--pos, rgba(19, 109, 69, .12)); color: var(--pos-fg, #136d45); }
.x4-projets-chip.est-validation { background: var(--accent-soft, rgba(245, 213, 71, .3)); color: var(--v2-accent, #7d640d); }
.x4-projets-chip.est-valide { background: var(--pos, rgba(19, 109, 69, .12)); color: var(--pos-fg, #136d45); }
.x4-projets-chip.est-retard { background: var(--neg-soft, rgba(179, 38, 30, .1)); color: var(--neg-fg, #b3261e); }
.x4-projets-bandeau { display: flex; align-items: center; gap: 14px; padding: 14px 20px; margin: 0 0 4px; border-radius: var(--r-md, 18px); background: var(--accent-soft, rgba(245, 213, 71, .26)); border: 1px solid rgba(125, 100, 13, .18); color: var(--v2-text, #16171a); }
.x4-projets-bandeau > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x4-projets-bandeau b { font-size: 14px; font-weight: 640; }
.x4-projets-bandeau span { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-projets-bandeau > button { margin-left: auto; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--v2-text, #16171a); color: var(--panel-solid, #fff); font: inherit; font-size: 12.5px; font-weight: 640; cursor: pointer; white-space: nowrap; letter-spacing: inherit; }
@media (max-width: 1100px) { .x4-projets-ligne { grid-template-columns: 1fr; gap: 10px; } .x4-projets-ligne-fin { align-items: flex-start; } }