/* Projets de validation d'acquis : arbre, encart du Parcours, atelier, soutenance. */
/* ------------------------------------------- projets de validation d'acquis (12/09)
   L'arbre n'invente qu'un matériau : le FIL qui relie les paliers, une pastille par projet
   (pleine = validé, vermillon = en cours, cerclée crème = ouvert, atténuée = pas encore).
   Tout le reste est repris : tampons d'état (.stm), cases de progression (.str), feuille
   crème pour l'atelier et l'éditeur, cadre vermillon pour la reprise. */
.pjline { position: relative; margin: 10px 0 0 9px; padding-left: 28px; border-left: 1px dashed var(--baize-line); }
.pjrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 22px; align-items: start; padding: 16px 0; border-top: 1px dashed var(--baize-line); }
.pjrow:first-child { border-top: 0; }
.pjrow::before { content: ""; position: absolute; left: -35px; top: 20px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--fg-faint); background: var(--baize); }
.pjrow.done::before { background: var(--cream); border-color: var(--cream); }
.pjrow.now::before { background: var(--stamp); border-color: var(--stamp); }
.pjrow.open::before { border-color: var(--cream); }
.pjt { font-size: 18px; }
.pjm { display: block; font-family: var(--type); font-size: 12px; color: var(--fg-faint); margin-top: 3px; }
.pjpitch { color: var(--fg-dim); font-size: 14.5px; line-height: 1.45; margin-top: 6px; max-width: 62ch; }
.pjstate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; font-size: 13px; color: var(--fg-dim); }
.pjmiss { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--baize-line); font-size: 13px; color: var(--fg-faint); max-width: 62ch; line-height: 1.45; }
.pjside { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; }
.pjside small { font-size: 12px; color: var(--fg-faint); }
.pjnote { font-family: var(--disp); font-size: 30px; line-height: 1; }
.pjnote small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-left: 4px; }
/* encart du Parcours, et le rappel en fin de palier */
.pjbox { margin-top: 26px; border: 1px dashed var(--fg-dim); border-radius: 3px; padding: 14px 16px; }
.pjbox p { color: var(--fg-dim); font-size: 14px; line-height: 1.45; margin-top: 6px; max-width: 68ch; }
.pjlink { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; width: 100%; text-align: left; padding: 11px 14px; margin-top: 12px; border: 1px solid var(--baize-line); border-radius: 3px; transition: background .15s; }
.pjlink:hover { background: rgba(255,255,255,.04); }
.pjlink small { display: block; font-family: var(--type); font-size: 12px; color: var(--fg-faint); margin-top: 2px; }
/* atelier */
.pjwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1100px; }
.jal { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; text-align: left; padding: 11px 10px; border-top: 1px solid var(--card-edge); transition: background .15s; }
.jal:first-of-type { border-top: 0; }
.jal:hover { background: rgba(var(--ink-rgb), .03); }
.jal.on { background: rgba(var(--ink-rgb), .05); }
.jal > .i { font-family: var(--disp); font-size: 15px; color: var(--ink-faint); }
.jal > span > .t { font-size: 16px; }
.jal > .k { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; padding-top: 3px; }
.jal > .k.ok { color: var(--ok); } .jal > .k.ko { color: var(--stamp); }
.jal > span > small { display: block; font-family: var(--type); font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.jalb { grid-column: 2 / -1; margin-top: 7px; font-size: 14.5px; line-height: 1.5; }
.ftabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ftab { font-family: var(--type); font-size: 13px; padding: 7px 13px; border: 1px solid var(--card-edge); border-bottom: 0; border-radius: 3px 3px 0 0; color: var(--ink-dim); background: rgba(var(--ink-rgb), .035); }
.ftab.on { background: var(--card-in); color: var(--ink); border-color: var(--ink-dim); }
.ftab b { color: var(--stamp); font-weight: 400; }
/* la petite ligne de machine sur le papier : état du dépôt, mentions discrètes de l'atelier */
.pjsave { font-family: var(--type); font-size: 12px; color: var(--ink-faint); }
.soutrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 90px; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px dashed var(--card-edge); font-size: 15px; }
.soutrow .n { font-family: var(--disp); color: var(--ink-dim); }
.soutrow .g { font-family: var(--disp); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.soutrow .g0 { color: var(--stamp); } .soutrow .g1 { color: var(--amber); } .soutrow .g2 { color: var(--ink-dim); } .soutrow .g3 { color: var(--ok); }
.soutrow small { display: block; color: var(--ink-dim); font-size: 13px; white-space: pre-wrap; }
/* ---- l'échelle des projets par taille (30/09) : chaque barreau est une taille ; son titre en Oswald, sa durée en
   machine à écrire, et le fil des projets dessous comme dans l'arbre par palier. Plus on descend, plus c'est gros. */
.ladder { margin-top: 8px; }
.rung { position: relative; margin-top: 26px; }
.rungh { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--baize-line); }
.rungh h2 { margin: 0; }
.rungs { font-family: var(--type); font-size: 12.5px; color: var(--fg-dim); }
.rungh .sp { flex: 1; }
.rungn { font-family: var(--type); font-size: 12px; color: var(--fg-faint); }
.rung[data-size="micro"] .rungh h2 { font-size: 20px; }
.rung[data-size="grand"] .rungh h2 { font-size: 30px; }