@z29k/notabene 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1048 @@
1
+ /* Documentation interne Apophis — thème lisible, clair/sombre auto. */
2
+
3
+ :root {
4
+ --bg: #ffffff;
5
+ --bg-soft: #f6f7f9;
6
+ --bg-elev: #ffffff;
7
+ --border: #e4e7ec;
8
+ --text: #1c2024;
9
+ --text-soft: #5b6470;
10
+ --text-faint: #8a929e;
11
+ --accent: #2f6feb;
12
+ --accent-soft: #e8f0ff;
13
+ --ref: #2f6feb;
14
+ --work: #b5651d;
15
+ --code-bg: #0d1117;
16
+ --topbar-h: 52px;
17
+ --sidebar-w: 290px;
18
+ --toc-w: 320px;
19
+ --content-max: 50rem;
20
+ --radius: 8px;
21
+ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
22
+ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
23
+ }
24
+
25
+ @media (prefers-color-scheme: dark) {
26
+ :root {
27
+ --bg: #0e1116;
28
+ --bg-soft: #151a21;
29
+ --bg-elev: #161b22;
30
+ --border: #272e38;
31
+ --text: #e7ebf0;
32
+ --text-soft: #aab2bd;
33
+ --text-faint: #768091;
34
+ --accent: #6ea0ff;
35
+ --accent-soft: #182539;
36
+ --ref: #6ea0ff;
37
+ --work: #e0a060;
38
+ --code-bg: #0b0e13;
39
+ }
40
+ }
41
+
42
+ * {
43
+ box-sizing: border-box;
44
+ }
45
+
46
+ /* L'attribut `hidden` doit toujours l'emporter sur les `display` des composants
47
+ (popover commentaires, formulaires de réponse repliés, etc.). */
48
+ [hidden] {
49
+ display: none !important;
50
+ }
51
+
52
+ html {
53
+ scroll-behavior: smooth;
54
+ scroll-padding-top: calc(var(--topbar-h) + 1rem);
55
+ }
56
+
57
+ body {
58
+ margin: 0;
59
+ background: var(--bg);
60
+ color: var(--text);
61
+ font-family: var(--sans);
62
+ font-size: 15px;
63
+ line-height: 1.6;
64
+ -webkit-font-smoothing: antialiased;
65
+ }
66
+
67
+ a {
68
+ color: var(--accent);
69
+ text-decoration: none;
70
+ }
71
+ a:hover {
72
+ text-decoration: underline;
73
+ }
74
+
75
+ /* ── Topbar ───────────────────────────────────────────────────────────── */
76
+ .topbar {
77
+ position: sticky;
78
+ top: 0;
79
+ z-index: 50;
80
+ height: var(--topbar-h);
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 1.5rem;
84
+ padding: 0 1rem;
85
+ background: var(--bg-elev);
86
+ border-bottom: 1px solid var(--border);
87
+ }
88
+ .brand {
89
+ font-weight: 700;
90
+ color: var(--text);
91
+ white-space: nowrap;
92
+ }
93
+ .brand span {
94
+ font-weight: 400;
95
+ color: var(--text-faint);
96
+ }
97
+ .brand:hover {
98
+ text-decoration: none;
99
+ }
100
+
101
+ .search {
102
+ position: relative;
103
+ flex: 1;
104
+ max-width: 520px;
105
+ }
106
+ .topbar-link {
107
+ font-size: 13px;
108
+ font-weight: 600;
109
+ color: var(--text-soft);
110
+ white-space: nowrap;
111
+ }
112
+ .topbar-link:hover {
113
+ color: var(--accent);
114
+ text-decoration: none;
115
+ }
116
+ .search input {
117
+ width: 100%;
118
+ height: 34px;
119
+ padding: 0 0.75rem;
120
+ border: 1px solid var(--border);
121
+ border-radius: var(--radius);
122
+ background: var(--bg-soft);
123
+ color: var(--text);
124
+ font-size: 14px;
125
+ }
126
+ .search input:focus {
127
+ outline: none;
128
+ border-color: var(--accent);
129
+ background: var(--bg);
130
+ }
131
+ .search-results {
132
+ position: absolute;
133
+ top: 40px;
134
+ left: 0;
135
+ right: 0;
136
+ max-height: 60vh;
137
+ overflow-y: auto;
138
+ background: var(--bg-elev);
139
+ border: 1px solid var(--border);
140
+ border-radius: var(--radius);
141
+ box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
142
+ padding: 4px;
143
+ }
144
+ .search-results a {
145
+ display: flex;
146
+ align-items: center;
147
+ gap: 0.6rem;
148
+ padding: 7px 9px;
149
+ border-radius: 6px;
150
+ color: var(--text);
151
+ }
152
+ .search-results a:hover {
153
+ background: var(--accent-soft);
154
+ text-decoration: none;
155
+ }
156
+ .r-space {
157
+ font-size: 11px;
158
+ font-weight: 600;
159
+ padding: 1px 6px;
160
+ border-radius: 999px;
161
+ color: #fff;
162
+ flex-shrink: 0;
163
+ }
164
+ .r-space.reference {
165
+ background: var(--ref);
166
+ }
167
+ .r-space.workbench {
168
+ background: var(--work);
169
+ }
170
+ .r-empty {
171
+ padding: 10px;
172
+ color: var(--text-faint);
173
+ }
174
+
175
+ /* ── Shell 3 colonnes ─────────────────────────────────────────────────── */
176
+ .shell {
177
+ display: grid;
178
+ grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
179
+ align-items: start;
180
+ }
181
+
182
+ .sidebar,
183
+ .rail {
184
+ position: sticky;
185
+ top: var(--topbar-h);
186
+ height: calc(100vh - var(--topbar-h));
187
+ overflow-y: auto;
188
+ }
189
+ .sidebar {
190
+ border-right: 1px solid var(--border);
191
+ padding: 0.75rem 0.5rem 3rem;
192
+ background: var(--bg-soft);
193
+ }
194
+ .rail {
195
+ padding: 1.1rem 0.9rem 3rem;
196
+ }
197
+
198
+ .content {
199
+ min-width: 0;
200
+ padding: 1.25rem clamp(1rem, 4vw, 3rem) 5rem;
201
+ }
202
+ .content > .prose,
203
+ .content > .breadcrumb {
204
+ max-width: var(--content-max);
205
+ margin-inline: auto;
206
+ }
207
+
208
+ /* ── Sidebar nav ──────────────────────────────────────────────────────── */
209
+ .nav-filter {
210
+ padding: 0.25rem 0.4rem 0.6rem;
211
+ }
212
+ .nav-filter input {
213
+ width: 100%;
214
+ height: 30px;
215
+ padding: 0 0.6rem;
216
+ border: 1px solid var(--border);
217
+ border-radius: 6px;
218
+ background: var(--bg);
219
+ color: var(--text);
220
+ font-size: 13px;
221
+ }
222
+ .nav-filter input:focus {
223
+ outline: none;
224
+ border-color: var(--accent);
225
+ }
226
+
227
+ .space {
228
+ margin-bottom: 0.75rem;
229
+ }
230
+ .space > .space-title {
231
+ display: flex;
232
+ align-items: baseline;
233
+ gap: 0.5rem;
234
+ padding: 0.35rem 0.5rem;
235
+ cursor: pointer;
236
+ list-style: none;
237
+ border-radius: 6px;
238
+ }
239
+ .space > .space-title::-webkit-details-marker {
240
+ display: none;
241
+ }
242
+ .space > .space-title:hover {
243
+ background: var(--accent-soft);
244
+ }
245
+ .space-name {
246
+ font-weight: 700;
247
+ font-size: 13px;
248
+ text-transform: uppercase;
249
+ letter-spacing: 0.04em;
250
+ }
251
+ .space[open] .space-name {
252
+ color: var(--accent);
253
+ }
254
+ .space-sub {
255
+ font-family: var(--mono);
256
+ font-size: 11px;
257
+ color: var(--text-faint);
258
+ }
259
+ .space-link {
260
+ margin: 0 0 0.25rem;
261
+ padding-left: 0.75rem;
262
+ font-size: 12px;
263
+ }
264
+
265
+ .nav-list {
266
+ list-style: none;
267
+ margin: 0;
268
+ padding: 0 0 0 0.55rem;
269
+ }
270
+ .nav-list .nav-list {
271
+ border-left: 1px solid var(--border);
272
+ margin-left: 0.35rem;
273
+ padding-left: 0.5rem;
274
+ }
275
+ .nav-group > details > summary {
276
+ display: block;
277
+ padding: 3px 6px;
278
+ cursor: pointer;
279
+ font-weight: 600;
280
+ font-size: 13px;
281
+ color: var(--text-soft);
282
+ border-radius: 5px;
283
+ list-style: none;
284
+ }
285
+ .nav-group > details > summary::-webkit-details-marker {
286
+ display: none;
287
+ }
288
+ .nav-group > details > summary::before {
289
+ content: "▸";
290
+ display: inline-block;
291
+ width: 1em;
292
+ font-size: 10px;
293
+ color: var(--text-faint);
294
+ transition: transform 0.12s;
295
+ }
296
+ .nav-group > details[open] > summary::before {
297
+ transform: rotate(90deg);
298
+ }
299
+ .nav-group > details > summary:hover {
300
+ background: var(--accent-soft);
301
+ }
302
+ .nav-a {
303
+ display: block;
304
+ padding: 3px 6px 3px 1.4em;
305
+ font-size: 13px;
306
+ color: var(--text-soft);
307
+ border-radius: 5px;
308
+ }
309
+ .nav-a:hover {
310
+ background: var(--accent-soft);
311
+ color: var(--text);
312
+ text-decoration: none;
313
+ }
314
+ .nav-a.active {
315
+ background: var(--accent-soft);
316
+ color: var(--accent);
317
+ font-weight: 600;
318
+ }
319
+
320
+ /* ── Breadcrumb ───────────────────────────────────────────────────────── */
321
+ .breadcrumb {
322
+ font-size: 12.5px;
323
+ color: var(--text-faint);
324
+ margin-bottom: 1rem;
325
+ }
326
+ .breadcrumb .sep {
327
+ margin: 0 0.4rem;
328
+ opacity: 0.6;
329
+ }
330
+
331
+ /* ── TOC ──────────────────────────────────────────────────────────────── */
332
+ .toc-title {
333
+ font-size: 11px;
334
+ font-weight: 700;
335
+ text-transform: uppercase;
336
+ letter-spacing: 0.05em;
337
+ color: var(--text-faint);
338
+ margin: 0 0 0.5rem;
339
+ }
340
+ .toc-inner ul {
341
+ list-style: none;
342
+ margin: 0;
343
+ padding: 0;
344
+ border-left: 1px solid var(--border);
345
+ }
346
+ .toc-inner li a {
347
+ display: block;
348
+ padding: 2px 0 2px 0.75rem;
349
+ font-size: 12.5px;
350
+ color: var(--text-soft);
351
+ border-left: 2px solid transparent;
352
+ margin-left: -1px;
353
+ }
354
+ .toc-inner li.d3 a {
355
+ padding-left: 1.5rem;
356
+ }
357
+ .toc-inner li a:hover {
358
+ color: var(--accent);
359
+ text-decoration: none;
360
+ }
361
+
362
+ /* ── Prose (contenu markdown) ─────────────────────────────────────────── */
363
+ .prose {
364
+ word-wrap: break-word;
365
+ }
366
+ .prose h1 {
367
+ font-size: 1.9rem;
368
+ line-height: 1.2;
369
+ margin: 0 0 1.2rem;
370
+ letter-spacing: -0.01em;
371
+ }
372
+ .prose h2 {
373
+ font-size: 1.4rem;
374
+ margin: 2.2rem 0 0.9rem;
375
+ padding-bottom: 0.3rem;
376
+ border-bottom: 1px solid var(--border);
377
+ }
378
+ .prose h3 {
379
+ font-size: 1.15rem;
380
+ margin: 1.8rem 0 0.7rem;
381
+ }
382
+ .prose h4 {
383
+ font-size: 1rem;
384
+ margin: 1.4rem 0 0.5rem;
385
+ }
386
+ .prose h2,
387
+ .prose h3,
388
+ .prose h4 {
389
+ scroll-margin-top: calc(var(--topbar-h) + 1rem);
390
+ }
391
+ .prose p,
392
+ .prose li {
393
+ color: var(--text);
394
+ }
395
+ .prose a {
396
+ text-decoration: underline;
397
+ text-underline-offset: 2px;
398
+ }
399
+ .prose code {
400
+ font-family: var(--mono);
401
+ font-size: 0.86em;
402
+ background: var(--bg-soft);
403
+ border: 1px solid var(--border);
404
+ border-radius: 4px;
405
+ padding: 0.1em 0.35em;
406
+ }
407
+ .prose pre {
408
+ background: var(--code-bg) !important;
409
+ border: 1px solid var(--border);
410
+ border-radius: var(--radius);
411
+ padding: 0.9rem 1rem;
412
+ overflow-x: auto;
413
+ font-size: 13px;
414
+ line-height: 1.5;
415
+ }
416
+ .prose pre code {
417
+ background: none;
418
+ border: none;
419
+ padding: 0;
420
+ font-size: inherit;
421
+ }
422
+ .prose blockquote {
423
+ margin: 1rem 0;
424
+ padding: 0.4rem 1rem;
425
+ border-left: 3px solid var(--accent);
426
+ background: var(--accent-soft);
427
+ border-radius: 0 6px 6px 0;
428
+ color: var(--text-soft);
429
+ }
430
+ .prose blockquote p {
431
+ margin: 0.3rem 0;
432
+ }
433
+ .prose table {
434
+ width: 100%;
435
+ border-collapse: collapse;
436
+ margin: 1rem 0;
437
+ font-size: 13.5px;
438
+ display: block;
439
+ overflow-x: auto;
440
+ }
441
+ .prose th,
442
+ .prose td {
443
+ border: 1px solid var(--border);
444
+ padding: 0.45rem 0.7rem;
445
+ text-align: left;
446
+ vertical-align: top;
447
+ }
448
+ .prose th {
449
+ background: var(--bg-soft);
450
+ font-weight: 600;
451
+ }
452
+ .prose img {
453
+ max-width: 100%;
454
+ border-radius: 6px;
455
+ }
456
+ .prose hr {
457
+ border: none;
458
+ border-top: 1px solid var(--border);
459
+ margin: 2rem 0;
460
+ }
461
+ .prose ul,
462
+ .prose ol {
463
+ padding-left: 1.4rem;
464
+ }
465
+ .prose li {
466
+ margin: 0.2rem 0;
467
+ }
468
+
469
+ /* ── Lede + cartes (index d'espace + accueil) ─────────────────────────── */
470
+ .lede {
471
+ font-size: 1.05rem;
472
+ color: var(--text-soft);
473
+ margin: -0.4rem 0 1.6rem;
474
+ }
475
+ .cards {
476
+ display: grid;
477
+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
478
+ gap: 1rem;
479
+ }
480
+ .card {
481
+ border: 1px solid var(--border);
482
+ border-radius: var(--radius);
483
+ padding: 0.9rem 1rem;
484
+ background: var(--bg-elev);
485
+ }
486
+ .card h3 {
487
+ margin: 0 0 0.5rem;
488
+ font-size: 1rem;
489
+ }
490
+ .card ul {
491
+ list-style: none;
492
+ margin: 0;
493
+ padding: 0;
494
+ }
495
+ .card li {
496
+ margin: 0.15rem 0;
497
+ font-size: 13.5px;
498
+ }
499
+ .card .more {
500
+ margin: 0.5rem 0 0;
501
+ font-size: 12px;
502
+ color: var(--text-faint);
503
+ }
504
+
505
+ .home-cards {
506
+ display: grid;
507
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
508
+ gap: 1.25rem;
509
+ margin-top: 1.5rem;
510
+ }
511
+ .home-card {
512
+ display: block;
513
+ border: 1px solid var(--border);
514
+ border-radius: 12px;
515
+ padding: 1.5rem;
516
+ background: var(--bg-elev);
517
+ color: var(--text);
518
+ transition: border-color 0.15s, transform 0.15s;
519
+ }
520
+ .home-card:hover {
521
+ border-color: var(--accent);
522
+ transform: translateY(-2px);
523
+ text-decoration: none;
524
+ }
525
+ .home-card h2 {
526
+ margin: 0 0 0.3rem;
527
+ }
528
+ .home-card p {
529
+ margin: 0.2rem 0;
530
+ color: var(--text-soft);
531
+ }
532
+
533
+ /* ── Responsive ───────────────────────────────────────────────────────── */
534
+ @media (max-width: 1100px) {
535
+ .shell {
536
+ grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
537
+ }
538
+ .rail {
539
+ display: none;
540
+ }
541
+ }
542
+ @media (max-width: 760px) {
543
+ .shell {
544
+ grid-template-columns: 1fr;
545
+ }
546
+ .sidebar {
547
+ position: static;
548
+ height: auto;
549
+ border-right: none;
550
+ border-bottom: 1px solid var(--border);
551
+ }
552
+ }
553
+
554
+ /* ── Comments + highlights ────────────────────────────────────────────── */
555
+ ::highlight(cmt) {
556
+ background: rgba(255, 200, 0, 0.28);
557
+ text-decoration: underline dotted var(--accent);
558
+ }
559
+ ::highlight(cmt-active) {
560
+ background: rgba(255, 145, 0, 0.55);
561
+ }
562
+
563
+ .comments {
564
+ margin-top: 1.5rem;
565
+ border-top: 1px solid var(--border);
566
+ padding-top: 1rem;
567
+ }
568
+ .cmt-head {
569
+ display: flex;
570
+ align-items: baseline;
571
+ justify-content: space-between;
572
+ }
573
+ .cmt-title {
574
+ font-size: 11px;
575
+ font-weight: 700;
576
+ text-transform: uppercase;
577
+ letter-spacing: 0.05em;
578
+ color: var(--text-faint);
579
+ }
580
+ .cmt-count {
581
+ font-size: 11px;
582
+ color: var(--text-faint);
583
+ }
584
+ .cmt-filter {
585
+ display: flex;
586
+ gap: 4px;
587
+ margin: 0.5rem 0;
588
+ }
589
+ .cmt-filter button {
590
+ font-size: 11px;
591
+ padding: 2px 8px;
592
+ border: 1px solid var(--border);
593
+ background: var(--bg);
594
+ color: var(--text-soft);
595
+ border-radius: 999px;
596
+ cursor: pointer;
597
+ }
598
+ .cmt-filter button.active {
599
+ background: var(--accent);
600
+ color: #fff;
601
+ border-color: var(--accent);
602
+ }
603
+ .cmt-pending {
604
+ font-size: 11.5px;
605
+ background: var(--accent-soft);
606
+ border-radius: 6px;
607
+ padding: 5px 8px;
608
+ margin-bottom: 6px;
609
+ color: var(--text-soft);
610
+ }
611
+ .cmt-pending button {
612
+ float: right;
613
+ border: none;
614
+ background: none;
615
+ cursor: pointer;
616
+ color: var(--text-faint);
617
+ }
618
+ .cmt-composer {
619
+ display: flex;
620
+ flex-direction: column;
621
+ gap: 5px;
622
+ margin-bottom: 1rem;
623
+ }
624
+ .cmt-composer textarea,
625
+ .cmt-reply-form textarea,
626
+ .cmt-edit-form textarea {
627
+ width: 100%;
628
+ border: 1px solid var(--border);
629
+ border-radius: 6px;
630
+ padding: 6px 8px;
631
+ font: inherit;
632
+ font-size: 13px;
633
+ background: var(--bg);
634
+ color: var(--text);
635
+ resize: vertical;
636
+ }
637
+ .cmt-composer button,
638
+ .cmt-reply-form button,
639
+ .cmt-edit-form button {
640
+ align-self: flex-end;
641
+ font-size: 12px;
642
+ padding: 4px 12px;
643
+ border: none;
644
+ border-radius: 6px;
645
+ background: var(--accent);
646
+ color: #fff;
647
+ cursor: pointer;
648
+ }
649
+ .cmt-list {
650
+ display: flex;
651
+ flex-direction: column;
652
+ gap: 10px;
653
+ }
654
+ .cmt-empty {
655
+ font-size: 12.5px;
656
+ color: var(--text-faint);
657
+ }
658
+ .cmt-card {
659
+ border: 1px solid var(--border);
660
+ border-radius: 8px;
661
+ padding: 8px 10px;
662
+ background: var(--bg-elev);
663
+ font-size: 13px;
664
+ }
665
+ .cmt-card.resolved {
666
+ opacity: 0.6;
667
+ }
668
+ .cmt-meta {
669
+ display: flex;
670
+ align-items: center;
671
+ gap: 6px;
672
+ margin-bottom: 4px;
673
+ }
674
+ .cmt-dot {
675
+ width: 8px;
676
+ height: 8px;
677
+ border-radius: 50%;
678
+ flex-shrink: 0;
679
+ }
680
+ .cmt-dot.open {
681
+ background: #e0a000;
682
+ }
683
+ .cmt-dot.addressed {
684
+ background: var(--accent);
685
+ }
686
+ .cmt-dot.resolved {
687
+ background: #3aa55d;
688
+ }
689
+ .cmt-quote {
690
+ font-size: 12px;
691
+ color: var(--accent);
692
+ cursor: pointer;
693
+ }
694
+ .cmt-quote.orphan {
695
+ color: #c0392b;
696
+ }
697
+ .cmt-scope {
698
+ font-size: 12px;
699
+ color: var(--text-faint);
700
+ }
701
+ .cmt-body {
702
+ color: var(--text);
703
+ word-wrap: break-word;
704
+ }
705
+ .cmt-reply {
706
+ margin-top: 4px;
707
+ padding-left: 8px;
708
+ border-left: 2px solid var(--border);
709
+ color: var(--text-soft);
710
+ }
711
+ .cmt-resolution {
712
+ margin-top: 5px;
713
+ font-size: 12px;
714
+ color: #3aa55d;
715
+ background: rgba(58, 165, 93, 0.1);
716
+ padding: 3px 6px;
717
+ border-radius: 4px;
718
+ }
719
+ .cmt-actions {
720
+ display: flex;
721
+ align-items: center;
722
+ gap: 8px;
723
+ margin-top: 6px;
724
+ }
725
+ .cmt-ts {
726
+ font-size: 10.5px;
727
+ color: var(--text-faint);
728
+ margin-right: auto;
729
+ }
730
+ .cmt-actions button {
731
+ display: inline-flex;
732
+ align-items: center;
733
+ border: none;
734
+ background: none;
735
+ color: var(--accent);
736
+ cursor: pointer;
737
+ padding: 2px;
738
+ }
739
+ .cmt-actions button:hover {
740
+ opacity: 0.6;
741
+ }
742
+ .cmt-actions button.danger {
743
+ color: var(--text-faint);
744
+ }
745
+ .cmt-reply-form,
746
+ .cmt-edit-form {
747
+ margin-top: 6px;
748
+ display: flex;
749
+ flex-direction: column;
750
+ gap: 4px;
751
+ }
752
+ .cmt-float {
753
+ position: fixed;
754
+ z-index: 60;
755
+ font-size: 12px;
756
+ padding: 4px 10px;
757
+ background: var(--accent);
758
+ color: #fff;
759
+ border: none;
760
+ border-radius: 6px;
761
+ cursor: pointer;
762
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
763
+ }
764
+
765
+ /* Discussion (commentaires de page) — en bas de la page, aligné sur la prose. */
766
+ .cmt-page {
767
+ max-width: var(--content-max);
768
+ margin: 3rem auto 0;
769
+ border-top: 2px solid var(--border);
770
+ padding-top: 1.5rem;
771
+ }
772
+ .cmt-page-head {
773
+ display: flex;
774
+ align-items: baseline;
775
+ gap: 0.6rem;
776
+ margin-bottom: 1rem;
777
+ }
778
+ .cmt-page-head h2 {
779
+ margin: 0;
780
+ font-size: 1.2rem;
781
+ border: none;
782
+ padding: 0;
783
+ }
784
+ .cmt-page .cmt-composer {
785
+ max-width: 640px;
786
+ }
787
+
788
+ /* Marge droite — annotations ancrées. */
789
+ .cmt-rail {
790
+ margin-top: 1.5rem;
791
+ border-top: 1px solid var(--border);
792
+ padding-top: 1rem;
793
+ }
794
+ .cmt-rail-head {
795
+ display: flex;
796
+ justify-content: space-between;
797
+ align-items: baseline;
798
+ margin-bottom: 0.4rem;
799
+ }
800
+ .cmt-rail-title {
801
+ font-size: 11px;
802
+ font-weight: 700;
803
+ text-transform: uppercase;
804
+ letter-spacing: 0.05em;
805
+ color: var(--text-faint);
806
+ }
807
+ .cmt-rail-count {
808
+ font-size: 11px;
809
+ color: var(--text-faint);
810
+ }
811
+
812
+ /* Popover de création sur sélection. */
813
+ .cmt-pop {
814
+ position: fixed;
815
+ z-index: 70;
816
+ width: 300px;
817
+ background: var(--bg-elev);
818
+ border: 1px solid var(--border);
819
+ border-radius: 8px;
820
+ box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
821
+ padding: 10px;
822
+ display: flex;
823
+ flex-direction: column;
824
+ gap: 8px;
825
+ }
826
+ .cmt-pop-quote {
827
+ font-size: 12px;
828
+ color: var(--text-soft);
829
+ background: var(--accent-soft);
830
+ border-radius: 5px;
831
+ padding: 5px 7px;
832
+ max-height: 64px;
833
+ overflow: auto;
834
+ }
835
+ .cmt-pop textarea {
836
+ width: 100%;
837
+ border: 1px solid var(--border);
838
+ border-radius: 6px;
839
+ padding: 6px 8px;
840
+ font: inherit;
841
+ font-size: 13px;
842
+ background: var(--bg);
843
+ color: var(--text);
844
+ resize: vertical;
845
+ }
846
+ .cmt-pop-actions {
847
+ display: flex;
848
+ justify-content: flex-end;
849
+ gap: 8px;
850
+ }
851
+ .cmt-pop-actions button {
852
+ font-size: 12px;
853
+ padding: 4px 12px;
854
+ border-radius: 6px;
855
+ border: 1px solid var(--border);
856
+ background: var(--bg);
857
+ color: var(--text-soft);
858
+ cursor: pointer;
859
+ }
860
+ .cmt-pop-actions #cmt-pop-save {
861
+ background: var(--accent);
862
+ color: #fff;
863
+ border-color: var(--accent);
864
+ }
865
+
866
+ /* Popover de LECTURE (clic sur texte surligné) — affiche le(s) commentaire(s). */
867
+ .cmt-view {
868
+ position: fixed;
869
+ z-index: 70;
870
+ width: 320px;
871
+ max-height: 60vh;
872
+ overflow-y: auto;
873
+ background: var(--bg-elev);
874
+ border: 1px solid var(--border);
875
+ border-radius: 8px;
876
+ box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
877
+ padding: 8px;
878
+ }
879
+ .cmt-view .cmt-card {
880
+ border: none;
881
+ background: none;
882
+ padding: 4px 2px;
883
+ }
884
+ .cmt-view .cmt-card + .cmt-card {
885
+ border-top: 1px solid var(--border);
886
+ margin-top: 4px;
887
+ }
888
+
889
+ /* ── Journal des modifications ────────────────────────────────────────── */
890
+ .journal {
891
+ display: flex;
892
+ flex-direction: column;
893
+ gap: 1.5rem;
894
+ }
895
+ .journal-entry {
896
+ border-left: 2px solid var(--accent);
897
+ padding-left: 1rem;
898
+ }
899
+ .journal-head {
900
+ display: flex;
901
+ align-items: baseline;
902
+ gap: 0.75rem;
903
+ }
904
+ .journal-head h2 {
905
+ margin: 0;
906
+ font-size: 1.1rem;
907
+ border: none;
908
+ padding: 0;
909
+ }
910
+ .journal-date {
911
+ font-size: 12px;
912
+ color: var(--text-faint);
913
+ font-family: var(--mono);
914
+ }
915
+ .journal-summary {
916
+ color: var(--text-soft);
917
+ white-space: pre-wrap;
918
+ margin: 0.4rem 0;
919
+ }
920
+ .journal-changes {
921
+ list-style: none;
922
+ padding: 0;
923
+ margin: 0.5rem 0 0;
924
+ display: flex;
925
+ flex-direction: column;
926
+ gap: 0.6rem;
927
+ }
928
+ .journal-changes li {
929
+ font-size: 13.5px;
930
+ }
931
+ .journal-page {
932
+ font-family: var(--mono);
933
+ font-size: 12.5px;
934
+ }
935
+ .journal-why {
936
+ color: var(--text-soft);
937
+ margin-top: 2px;
938
+ }
939
+ .journal-cids {
940
+ font-size: 11px;
941
+ color: var(--text-faint);
942
+ font-family: var(--mono);
943
+ margin-top: 2px;
944
+ }
945
+
946
+ /* ── En attente (hold) ────────────────────────────────────────────────── */
947
+ .cmt-hold-badge {
948
+ font-size: 10.5px;
949
+ color: #c98a00;
950
+ background: rgba(201, 138, 0, 0.13);
951
+ border-radius: 999px;
952
+ padding: 1px 7px;
953
+ }
954
+ .cmt-card.held,
955
+ .caf-row.held {
956
+ opacity: 0.72;
957
+ border-style: dashed;
958
+ }
959
+
960
+ /* ── Page globale /comments ───────────────────────────────────────────── */
961
+ .caf-filters {
962
+ display: flex;
963
+ flex-wrap: wrap;
964
+ gap: 8px;
965
+ align-items: center;
966
+ margin: 1rem 0 1.25rem;
967
+ }
968
+ .caf-filters input[type="search"] {
969
+ flex: 1;
970
+ min-width: 200px;
971
+ height: 32px;
972
+ padding: 0 0.6rem;
973
+ border: 1px solid var(--border);
974
+ border-radius: 6px;
975
+ background: var(--bg);
976
+ color: var(--text);
977
+ font-size: 13px;
978
+ }
979
+ .caf-filters select {
980
+ height: 32px;
981
+ border: 1px solid var(--border);
982
+ border-radius: 6px;
983
+ background: var(--bg);
984
+ color: var(--text);
985
+ font-size: 13px;
986
+ padding: 0 6px;
987
+ }
988
+ .caf-list {
989
+ display: flex;
990
+ flex-direction: column;
991
+ gap: 8px;
992
+ }
993
+ .caf-row {
994
+ border: 1px solid var(--border);
995
+ border-radius: 8px;
996
+ padding: 8px 12px;
997
+ background: var(--bg-elev);
998
+ font-size: 13.5px;
999
+ }
1000
+ .caf-row.resolved {
1001
+ opacity: 0.6;
1002
+ }
1003
+ .caf-row-top {
1004
+ display: flex;
1005
+ align-items: center;
1006
+ gap: 8px;
1007
+ flex-wrap: wrap;
1008
+ margin-bottom: 4px;
1009
+ }
1010
+ .caf-page {
1011
+ font-family: var(--mono);
1012
+ font-size: 12.5px;
1013
+ }
1014
+ .caf-quote {
1015
+ color: var(--accent);
1016
+ font-size: 12.5px;
1017
+ }
1018
+ .caf-replies {
1019
+ font-size: 11px;
1020
+ color: var(--text-faint);
1021
+ }
1022
+ .caf-body {
1023
+ color: var(--text);
1024
+ }
1025
+ .caf-actions {
1026
+ display: flex;
1027
+ align-items: center;
1028
+ gap: 10px;
1029
+ margin-top: 6px;
1030
+ }
1031
+ .caf-actions .cmt-ts {
1032
+ margin-right: auto;
1033
+ }
1034
+ .caf-actions button {
1035
+ display: inline-flex;
1036
+ align-items: center;
1037
+ border: none;
1038
+ background: none;
1039
+ color: var(--accent);
1040
+ cursor: pointer;
1041
+ padding: 2px;
1042
+ }
1043
+ .caf-actions button:hover {
1044
+ opacity: 0.6;
1045
+ }
1046
+ .caf-actions button.danger {
1047
+ color: var(--text-faint);
1048
+ }