/* LES PROJETS ET LE LIVE dans la web app (29/10/2026) — `projets.js`.
   ⛔ AUCUNE VALEUR NEUVE : les tokens de `compagnon.css` (--kind-project, --r-panel, --dur-*, --ease-*).
   Le bleu azur est celui du type « projet » d'Exprism, partout où un projet se montre. */

/* L'onglet porte la couleur de son contenu, comme les autres (jours en vert, notes en magenta). */
#cp-o-projets{--onglet:var(--kind-project)}
:is(.cp-prj-carte,.cp-prj-picto)[data-kind="project"]{--k:var(--kind-project)}
:is(.cp-prj-carte,.cp-prj-picto)[data-kind="note"]{--k:var(--kind-note)}

.cp-prj-liste{display:flex;flex-direction:column;gap:8px}
.cp-prj-carte{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;text-align:left;cursor:pointer;
  border-radius:var(--r-panel);background:var(--bg2);color:var(--txt);font:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k,var(--line2)) 18%,var(--line));
  transition:transform var(--dur-1) var(--ease-bounce),box-shadow var(--dur-1) var(--ease-soft)}
.cp-prj-carte:active{transform:scale(.985)}
.cp-prj-carte-corps{min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-prj-carte-corps strong{font-size:16px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-prj-carte-corps small{font-size:13px;color:var(--dim)}
.cp-prj-ico{color:var(--kind-project)}

.cp-prj-tete{justify-content:flex-start}
.cp-prj-nom-titre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:24px}

/* La timeline VERTICALE : une colonne de blocs, la grammaire d'Exprism à l'échelle du pouce. */
.cp-prj-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cp-prj-li-greffe{padding-left:22px;position:relative}
.cp-prj-li-greffe::before{content:"";position:absolute;left:9px;top:-6px;bottom:50%;width:9px;
  border-left:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);border-bottom-left-radius:8px}
.cp-prj-bloc{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:11px 14px;border:0;text-align:left;
  border-radius:var(--r-ui);background:var(--bg2);color:var(--txt);font:inherit;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);transition:transform var(--dur-1) var(--ease-bounce)}
.cp-prj-bloc:active{transform:scale(.99)}
.cp-prj-texte p{margin:0;font-size:15px;line-height:1.5}
.cp-prj-texte .cp-prj-vide{color:var(--faint)}
.cp-prj-titre{margin:2px 0;font-size:17px;font-weight:700;letter-spacing:-.01em}
h3.cp-prj-titre{font-size:16px}
h4.cp-prj-titre{font-size:15px}
.cp-prj-plan{box-shadow:inset 3px 0 0 var(--kind-project),inset 0 0 0 1px var(--line)}
.cp-prj-plan-tete{display:flex;align-items:center;gap:8px;min-width:0}
.cp-prj-plan-tete svg{flex:none;width:18px;height:18px;color:var(--kind-project)}
.cp-prj-plan-nom{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.cp-prj-plan-tete small{flex:none;color:var(--dim);font-variant-numeric:tabular-nums}
.cp-prj-dit{display:block;font-size:14px;line-height:1.45;color:var(--txt2);font-style:italic;quotes:"« " " »"}
.cp-prj-greffe{padding:8px 12px}
.cp-prj-etiquette{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cp-prj-etat{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--attente)}
.cp-prj-etat svg{width:14px;height:14px}
.cp-prj-refus{color:var(--err)}
.cp-prj-en-route{opacity:.82}
.cp-prj-pied{display:flex;justify-content:center;margin:14px 0 6px}
.cp-prj-note{margin:4px 0 12px;font-size:13px;line-height:1.45;color:var(--dim)}

/* Les gestes d'un bloc, et l'écriture. */
.cp-prj-actions{display:flex;flex-direction:column;gap:6px}
.cp-prj-action{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;border:0;border-radius:var(--r-ui);
  background:var(--bg2);color:var(--txt);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.cp-prj-action svg{width:20px;height:20px;color:var(--kind-project)}
/* Monter / descendre : les flèches de la page, tournées d'un quart (gauche → haut, droite → bas). */
.cp-prj-vertical svg{transform:rotate(90deg)}
.cp-prj-edition{display:flex;flex-direction:column;gap:10px}
.cp-prj-champ,.cp-prj-nom{width:100%;border:0;border-radius:var(--r-ui);padding:12px 14px;background:var(--bg2);color:var(--txt);
  font:inherit;font-size:var(--note-font-size);line-height:1.5;box-shadow:inset 0 0 0 1px var(--line2);resize:vertical}
.cp-prj-champ{min-height:40vh}
.cp-prj-boutons{display:flex;justify-content:flex-end;gap:10px}
.cp-prj-champ:focus,.cp-prj-nom:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--kind-project)}

/* LE LIVE : un pouls qui ne bat que quand l'ordinateur montre quelque chose. */
.cp-prj-btn-live{gap:7px}
.cp-prj-pouls{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.on>.cp-prj-pouls{background:var(--kind-project);box-shadow:0 0 0 0 color-mix(in srgb,var(--kind-project) 60%,transparent);
  animation:cp-prj-pouls 1.8s var(--ease-soft) infinite}
@keyframes cp-prj-pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--kind-project) 55%,transparent)}
  70%,100%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.on>.cp-prj-pouls{animation:none}}
.cp-prj-live{display:flex;align-items:center;gap:10px;margin:6px 0 14px;padding:10px 12px;border-radius:var(--r-panel);
  background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--dim)}
.cp-prj-live.on{color:var(--txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kind-project) 40%,var(--line))}
.cp-prj-live>span:nth-child(2){flex:1}