/* PDF→Web — thème générique câblé sur tokens extraits du PDF source (Dimension Stores). Violet #6847EB · héros sombres · slugs JetBrains Mono (R37) · corps clair Plus Jakarta Sans. */ :root{ --accent:#6847EB; --accent-d:#4f33c9; --accent-soft:#efeafe; --accent-ink:#3a2a8c; --ink:#15151f; --ink-2:#4a4a59; --ink-3:#8a8a99; --line:#e7e7ef; --line-2:#efeff4; --bg:#f6f6fb; --card:#ffffff; --dark:#0d0d18; --dark-2:#1a1830; --danger:#d6336c; --danger-soft:#fdecf2; --success:#1f9d6b; --success-soft:#e8f7f0; --warn:#caa23a; --warn-soft:#fdf6e3; --info:#6847EB; --info-soft:#efeafe; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --tb-h:58px; } *{box-sizing:border-box} html,body{margin:0} body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} b,strong{font-weight:700} a{color:var(--accent);text-decoration:none} /* ---------- Toolbar ---------- */ .toolbar{position:sticky;top:0;z-index:40;height:var(--tb-h);display:flex;align-items:center;justify-content:space-between; gap:16px;padding:0 18px;background:var(--dark);color:#fff} .tb-left{display:flex;align-items:center;gap:14px;min-width:0} .brand{font-family:var(--mono);font-weight:700;letter-spacing:.06em;font-size:13px;color:#fff;background:rgba(255,255,255,.08);padding:5px 9px;border-radius:7px} .doc-title{font-weight:600;font-size:14px;color:#cfcce6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tb-right{display:flex;align-items:center;gap:8px} .tb-btn{font-family:var(--sans);font-size:12.5px;font-weight:600;color:#e8e6f5;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);padding:7px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.15s} .tb-btn:hover{background:rgba(255,255,255,.14)} .tb-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} .role-toggle b{color:#fff} .pill{display:inline-block;min-width:18px;text-align:center;font-family:var(--mono);font-size:11px;background:var(--accent);color:#fff;border-radius:20px;padding:1px 6px;margin-left:3px} /* ---------- Sélecteur acteur (T13, public/pdfweb/collab.js) — "je me connecte en tant que" ------- Posé dans la toolbar (tb-right), câblé sur les mêmes acteurs que le rail d'assignation (T12) : choisir un acteur filtre la timeline droite sur ses tâches (app.js:setActorFilter). Cosmétique côté client — n'élève JAMAIS un privilège serveur (aucune session admin/member créée ici) ; une vraie identité member ne peut venir QUE du lien magique (T3/callback), cf. commentaire actorbar.js. */ .actorbar{position:relative} .actorbar-btn{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12.5px;font-weight:600; color:#e8e6f5;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:5px 10px 5px 5px; border-radius:9999px;cursor:pointer;white-space:nowrap;transition:.15s} .actorbar-btn:hover{background:rgba(255,255,255,.14)} .actorbar-av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:9999px; font-family:var(--sans);font-size:10px;font-weight:700;color:#fff;flex:0 0 auto} .actorbar-chevron{width:9px;height:9px;opacity:.7} .actorbar-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;border:1px solid var(--line); border-radius:12px;box-shadow:0 8px 24px rgba(20,20,30,.16);padding:6px;z-index:60} .actorbar-menu[hidden]{display:none} .actorbar-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left; font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);padding:7px 8px;border-radius:8px;cursor:pointer} .actorbar-item:hover{background:var(--line-2)} .actorbar-item[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink)} .actorbar-item-all{color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:9px;border-radius:0} .progress{display:flex;align-items:center;gap:8px;margin-right:6px} .progress-bar{width:90px;height:7px;border-radius:20px;background:rgba(255,255,255,.16);overflow:hidden} .progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#9b86ff);transition:width .4s} .progress-label{font-family:var(--mono);font-size:11px;color:#cfcce6} /* ---------- Layout 3 colonnes ---------- */ .layout{display:grid;grid-template-columns:224px minmax(0,1fr) 384px;gap:0;align-items:start} .nav{position:sticky;top:var(--tb-h);height:calc(100vh - var(--tb-h));display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line)} .nav-scroll{flex:1;min-height:0;overflow:auto;padding:18px 14px} .team-dock{flex:none;border-top:1px solid var(--line);background:#fbfbfe;padding:10px 12px 12px;max-height:44vh;overflow:auto} .timeline{position:sticky;top:var(--tb-h);height:calc(100vh - var(--tb-h));overflow:auto;padding:18px 12px;border-left:1px solid var(--line);background:#fbfbfe} @media(max-width:1180px){.layout{grid-template-columns:210px minmax(0,1fr) 320px}} .nav-head,.tl-head{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);margin:2px 0 12px;font-weight:600} .nav-list{list-style:none;margin:0;padding:0} .nav-list li{margin:1px 0} .nav-list a{display:flex;gap:9px;align-items:baseline;padding:7px 9px;border-radius:8px;color:var(--ink-2);font-size:13px;line-height:1.3} .nav-list a .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:18px} .nav-list a:hover{background:var(--line-2)} .nav-list a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .nav-list a.active .n{color:var(--accent)} /* ---------- Nav nested (Bonus + sous-menu) + couleurs/lignes verticales + initiale assigné (T20) -- `.nav-item.nested` = entrée de sous-menu (indentée, sans numéro `.n` proéminent) ; `.nav-sublist` = liste des enfants d'un parent (Bonus > Drive-to-store / Lives enchère / Sponsorisation organique, C3), repliable via `.nav-toggle` (chevron SVG, jamais un emoji — R36) et persistée en localStorage par doc (app.js loadNavCollapsed/saveNavCollapsed). `.has-line` pose la ligne verticale de phase/regroupement/urgence (C1) via la variable inline `--nav-line` posée par navPhaseColor() — jamais une couleur en dur ici, elle vient du JSON (ou de la palette stable dérivée d'un id, même mécanique que les avatars membres du rail collab T12). `.nav-assignee` (C6) = pastille initiale, MÊME gabarit que les avatars du rail (20px, texte mono, jamais emoji). */ .nav-item{position:relative} .nav-item.nested .nav-list a,.nav-item.nested>a{padding-left:15px} .nav-sublist{list-style:none;margin:2px 0 4px 20px;padding:0;border-left:1px dashed var(--line);overflow:hidden;transition:max-height .18s ease} .nav-sublist[hidden]{display:none} .nav-sublist .nav-item{margin:1px 0} .nav-sublist a{padding:6px 9px 6px 12px;font-size:12.5px} .nav-list a.has-line{border-left:2.5px solid var(--nav-line,var(--line));padding-left:6.5px;margin-left:2.5px} .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-right:-3px; border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:4px;flex:none} .nav-toggle:hover{background:var(--line-2);color:var(--ink-2)} .nav-chevron{width:12px;height:12px;transition:transform .15s ease} .nav-toggle[aria-expanded="false"] .nav-chevron{transform:rotate(-90deg)} .nav-assignee{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:9999px;color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.01em} /* ---------- Notifs sommaire ciblées (T16, public/pdfweb/collab.js) -------------------------------- Panneau au-dessus du sommaire (#nav), rempli par renderNotifs() : UNIQUEMENT les mutations récentes (assignation/« c'est bon ») qui concernent l'acteur courant (assigné) ou l'admin — jamais un flux brut de toutes les mutations du doc (cf. RISK MITIGATION plan « notif broadcast bruyant »). */ .nav-notifs{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .nav-notifs[hidden]{display:none} .nav-notifs-head{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px} .nav-notifs-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px; border-radius:9999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700} .nav-notifs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .nav-notif{display:block;width:100%;border:0;background:var(--line-2);border-radius:9px;padding:8px 10px;text-align:left; cursor:pointer;font-family:var(--sans);color:var(--ink-2);transition:.15s} .nav-notif:hover{background:var(--accent-soft);color:var(--accent-ink)} .nav-notif.is-unread{background:var(--accent-soft)} .nav-notif-title{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35} .nav-notif-meta{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px} .nav-notifs-empty{font-size:12px;color:var(--ink-3);padding:2px 2px 0} /* ---------- Document ---------- */ .doc-wrap{padding:34px clamp(18px,4vw,56px) 60px;max-width:920px;margin:0 auto;width:100%} .doc-foot{max-width:920px;margin:0 auto;padding:18px clamp(18px,4vw,56px) 40px;font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between;border-top:1px solid var(--line)} .section{margin:0 0 46px;scroll-margin-top:74px} .sec-head{display:flex;gap:14px;align-items:flex-start;margin:0 0 20px} .sec-num{font-family:var(--mono);font-weight:700;font-size:15px;color:#fff;background:var(--accent);border-radius:10px;min-width:42px;height:42px;display:flex;align-items:center;justify-content:center} .sec-titles{flex:1;min-width:0} .sec-slug{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--accent);margin-bottom:3px} .sec-h{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0} .sec-kicker{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right;max-width:200px;line-height:1.5;padding-top:4px} .rule{height:2px;background:linear-gradient(90deg,var(--accent),transparent);border:0;margin:0 0 18px} .b-lead{font-size:16.5px;color:var(--ink-2);line-height:1.6;margin:0 0 20px} .b-h{font-size:16px;font-weight:700;margin:26px 0 12px;padding-left:11px;border-left:3px solid var(--accent)} .b-p{margin:0 0 14px;color:var(--ink-2)} .b-foot{font-size:12.5px;color:var(--ink-3);margin-top:10px} .b-list{margin:0 0 16px;padding-left:20px} .b-list li{margin:5px 0;color:var(--ink-2)} .mono{font-family:var(--mono);font-size:.9em;background:var(--line-2);padding:1px 5px;border-radius:5px} /* tables */ .b-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden} .b-table thead th{background:var(--dark);color:#fff;text-align:left;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.04em;padding:11px 12px} .b-table td{padding:11px 12px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top} .b-table tbody tr:nth-child(even){background:#fafafe} .b-table td.r,.b-table th.r{text-align:right;font-variant-numeric:tabular-nums} .b-table .strong{color:var(--ink);font-weight:700} .cap{font-size:12px;color:var(--ink-3);margin:-10px 0 16px} /* badges */ .badge{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:4px 9px;border-radius:20px;border:1px solid} .badge.success{background:var(--success-soft);color:var(--success);border-color:#bfe7d6} .badge.danger{background:var(--danger-soft);color:var(--danger);border-color:#f6c9da} .badge.warn{background:var(--warn-soft);color:#9a7a1e;border-color:#ecdca0} .badge.neutral{background:var(--line-2);color:var(--ink-2);border-color:var(--line)} /* callouts — carte PLATE (R12 "zéro arc décoratif", T13/T14) : ni border-radius, ni border-left ; séparation de variante portée par le fond teinté + un mot-clé de tête, jamais par une bordure arquée. */ .callout{border-radius:0;padding:14px 16px;margin:0 0 18px;border:1px solid var(--line);background:var(--card)} .callout .lab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;margin-bottom:5px;display:block} .callout p{margin:0;font-size:13.5px;color:var(--ink-2)} .callout.info{border-color:var(--accent-soft);background:var(--info-soft)}.callout.info .lab{color:var(--accent-ink)} .callout.warn{border-color:var(--warn-soft);background:var(--warn-soft)}.callout.warn .lab{color:#9a7a1e} .callout.success{border-color:var(--success-soft);background:var(--success-soft)}.callout.success .lab{color:var(--success)} .callout.danger{border-color:var(--danger-soft);background:var(--danger-soft)}.callout.danger .lab{color:var(--danger)} .callout.note{border-color:var(--line);background:#f3f3f8}.callout.note .lab{color:var(--ink-2)} /* cover + thesis (dark) — T21 : hero condensé (moins de padding/marges verticales qu'avant, le sommaire de groupes devient un