/* ------------------------------------------------------------------
   Facette · onglet Projets (03/10/2026)
   Que des variables de styles.css ; les fonds légers sont tirés de
   --texte (color-mix), donc justes en thème sombre comme en clair.
   ------------------------------------------------------------------ */

#vue-projets{--pj-doux:color-mix(in srgb,var(--texte) 4%,transparent);--pj-champ:color-mix(in srgb,var(--texte) 6%,transparent)}
#vue-projets .pj-tete h2{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
#vue-projets .pj-tete p{color:var(--texte-doux);font-size:14.5px;margin-top:4px;max-width:90ch}
#vue-projets .pj-vide,#vue-projets .pj-erreur{color:var(--texte-doux);font-size:14px;padding:18px 2px}
#vue-projets .pj-erreur{color:var(--rose)}

/* ---- ajouter ---- */
#vue-projets .pj-nouveau{display:flex;gap:10px;margin-top:18px}
#vue-projets .pj-nouveau input{flex:1;min-width:0;font:inherit;font-size:15.5px;color:var(--texte);background:var(--carte);
  border:1px solid var(--trait-fort);border-radius:12px;padding:13px 16px}
#vue-projets .pj-nouveau input:focus,#vue-projets textarea:focus,#vue-projets .pj-titre-champ:focus,#vue-projets select:focus{outline:2px solid var(--violet);outline-offset:1px}
#vue-projets button{font:inherit;cursor:pointer;color:var(--texte);background:var(--pj-champ);border:1px solid var(--trait-fort);border-radius:10px;padding:8px 14px;font-size:13.5px}
#vue-projets button:hover{border-color:var(--violet)}
#vue-projets .pj-principal{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:600}
#vue-projets .pj-nouveau .pj-principal{padding:0 22px;font-size:15px;border-radius:12px}

/* ---- filtres ---- */
#vue-projets .pj-filtres{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 12px}
#vue-projets .pj-filtres button{border-radius:999px;padding:6px 14px}
#vue-projets .pj-filtres button i{font-style:normal;color:var(--texte-faible);margin-left:3px}
#vue-projets .pj-filtres button.actif{background:var(--violet);border-color:var(--violet);color:#fff}
#vue-projets .pj-filtres button.actif i{color:rgba(255,255,255,.75)}

/* ---- les projets ---- */
#vue-projets .pj-liste{display:flex;flex-direction:column;gap:10px}
#vue-projets .pj-carte{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);padding:14px 18px;
  box-shadow:inset 4px 0 0 var(--pj-ton,var(--trait-fort))}
#vue-projets .pj-en_cours{--pj-ton:var(--violet)}
#vue-projets .pj-idee{--pj-ton:var(--orange)}
#vue-projets .pj-fait{--pj-ton:var(--vert)}
#vue-projets .pj-fait .pj-titre{color:var(--texte-doux)}
#vue-projets .pj-ligne{display:flex;align-items:flex-start;gap:12px}
#vue-projets .pj-ouvrir{flex:none;width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:8px;margin-top:2px}
#vue-projets .pj-ouvrir svg{transition:transform .15s}
#vue-projets .pj-ouvert .pj-ouvrir svg{transform:rotate(90deg)}
#vue-projets .pj-titre-zone{flex:1;min-width:0;cursor:pointer}
#vue-projets .pj-titre{font-family:var(--display);font-weight:700;font-size:17.5px;line-height:1.3;overflow-wrap:anywhere}
#vue-projets .pj-titre-champ{width:100%;font:inherit;font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--texte);
  background:var(--pj-champ);border:1px solid var(--trait-fort);border-radius:8px;padding:4px 8px;cursor:text}
#vue-projets .pj-meta{font-size:12.5px;color:var(--texte-faible);margin-top:3px}
#vue-projets .pj-apercu{font-size:13.5px;color:var(--texte-doux);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vue-projets .pj-choix{flex:none;display:flex;flex-direction:column;gap:2px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-faible)}
#vue-projets select{font:inherit;font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--texte);background:var(--pj-champ);
  border:1px solid var(--trait-fort);border-radius:8px;padding:6px 8px;min-width:112px}
#vue-projets select option{color:#111;background:#fff}

/* ---- les notes ---- */
#vue-projets .pj-corps{margin:12px 0 2px 42px}
#vue-projets .pj-notes{display:block;width:100%;text-align:left;font-size:14.5px;line-height:1.6;color:var(--texte);
  background:var(--pj-doux);border:1px solid var(--trait);border-radius:12px;padding:12px 14px;cursor:text;overflow-wrap:anywhere}
#vue-projets .pj-notes a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
#vue-projets .pj-notes-vide{color:var(--texte-faible);font-size:14px}
#vue-projets textarea{display:block;width:100%;min-height:160px;resize:vertical;font:inherit;font-size:14.5px;line-height:1.6;color:var(--texte);
  background:var(--pj-champ);border:1px solid var(--trait-fort);border-radius:12px;padding:12px 14px}
#vue-projets .pj-boutons{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px;flex-wrap:wrap}
#vue-projets .pj-etat{margin-right:auto;font-size:12.5px;color:var(--texte-faible)}
#vue-projets .pj-etat--erreur{color:var(--rose)}
#vue-projets .pj-supprimer{color:var(--rose)}
#vue-projets .pj-supprimer:hover{border-color:var(--rose)}

/* ---- l'autre a modifié pendant qu'on écrivait ---- */
#vue-projets .pj-conflit{margin:12px 0 0 42px;border:1px solid rgba(255,154,61,.6);background:rgba(255,154,61,.10);border-radius:12px;padding:12px 14px;font-size:14px}
#vue-projets .pj-conflit-texte{margin-top:8px;max-height:220px;overflow:auto;font-size:13.5px;color:var(--texte-doux);line-height:1.55}

@media (max-width:760px){
  #vue-projets .pj-ligne{flex-wrap:wrap}
  #vue-projets .pj-titre-zone{flex-basis:calc(100% - 42px)}
  #vue-projets .pj-choix{margin-left:42px}
  #vue-projets .pj-choix + .pj-choix{margin-left:0}
  #vue-projets .pj-corps,#vue-projets .pj-conflit{margin-left:0}
  #vue-projets .pj-nouveau .pj-principal{padding:0 16px}
}

/* ---- les fichiers (04/10/2026) ---- */
#vue-projets .pj-fichiers{margin-top:14px}
#vue-projets .pj-fichiers-titre{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-faible);margin-bottom:6px}
#vue-projets .pj-fichiers ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
#vue-projets .pj-fichiers li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;background:var(--pj-doux);border:1px solid var(--trait);border-radius:10px;padding:8px 12px}
#vue-projets .pj-fichiers li a{flex:1 1 180px;min-width:0;color:var(--violet);font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
#vue-projets .pj-fichiers li span{font-size:12.5px;color:var(--texte-faible)}
#vue-projets .pj-fichiers .pj-retirer{padding:4px 10px;font-size:12.5px;color:var(--texte-doux)}
#vue-projets .pj-fichiers .pj-retirer:hover{border-color:var(--rose);color:var(--rose)}
#vue-projets .pj-depot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;cursor:pointer;border:1.5px dashed var(--trait-fort);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--texte-doux)}
#vue-projets .pj-depot b{color:var(--violet);font-weight:600}
#vue-projets .pj-depot:hover,#vue-projets .pj-cible .pj-depot{border-color:var(--violet);background:var(--pj-doux)}
#vue-projets .pj-depot:focus-within{outline:2px solid var(--violet);outline-offset:1px}
#vue-projets .pj-cible{outline:2px dashed var(--violet);outline-offset:2px}
#vue-projets .pj-depot-etat{font-size:13px;color:var(--texte-doux);margin-top:6px}
#vue-projets .pj-depot-etat.pj-etat--erreur{color:var(--rose)}