, so the rules below target
bare elements (no class hooks). */
.pld-root .docs-prose > h2 {
margin-top: 36px;
}
.pld-root .docs-prose > h2:first-child {
margin-top: 0;
}
/* The first paragraph reads as a lede: a touch larger and in ink
instead of ink-2. Markdown puts the lead text first as a plain ,
so :first-child catches it. The `.is-first` qualifier is needed
because chapters with embedded React components (e.g. ProcessFlow)
render multiple sibling `.docs-prose` divs — only the first one is
the actual document opener. */
.pld-root .docs-prose.is-first > p:first-child {
color: var(--ink);
font-size: 17px;
line-height: 1.6;
margin-bottom: 32px;
}
.pld-root .docs-prose em {
color: var(--ink);
font-style: italic;
}
/* Markdown-rendered
: same look as the explicit .legal-list but
without the class hook. */
.pld-root .docs-prose > ul {
margin: 0 0 14px;
padding-left: 22px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.65;
}
.pld-root .docs-prose > ul li {
margin-bottom: 6px;
}
.pld-root .docs-prose > ul li::marker {
color: var(--accent);
}
/* Markdown-rendered : mirror the look so numbered steps render
with the same density and accent color. Tailwind preflight strips the
default list-style/padding on , so we restore both explicitly. */
.pld-root .docs-prose > ol {
margin: 0 0 14px;
padding-left: 28px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.65;
list-style: decimal outside;
}
.pld-root .docs-prose > ol li {
margin-bottom: 6px;
}
.pld-root .docs-prose > ol li::marker {
color: var(--accent);
font-weight: 600;
}
/* Markdown-rendered ![]()
: full width of the prose column, framed and
slightly inset so screenshots feel intentional rather than dropped in.
Caption (the alt text) is exposed via the `title` once we use that. */
.pld-root .docs-prose img {
display: block;
max-width: 100%;
height: auto;
margin: 14px 0 18px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-card);
}
.pld-root .docs-prose li img {
margin: 10px 0 4px;
}
/* Section-level shared icons (e.g. confidentialite.svg, learn.svg) used
below an H2 to punctuate a chapter section. Medium size, centered,
neutral grey fill (--ink-2 baked into the SVG) with a teal drop-shadow
halo for brand cohesion. */
.pld-root .docs-prose img[src*="icons/shared"] {
display: block;
width: 64px;
height: 64px;
margin: 18px auto 28px;
border: none;
background: transparent;
box-shadow: none;
filter:
drop-shadow(0 0 10px rgba(42, 157, 143, 0.35))
drop-shadow(0 0 20px rgba(42, 157, 143, 0.18));
}
/* Inline hand-role icons (open, 3-bet, squeeze, BvB, etc.) rendered
inline next to the role name in body copy. Same recipe as the
in-app HandRoleIcon component: brightness(0) invert(0.75) tints
the black source SVG to a neutral light grey. */
.pld-root .docs-prose img[src*="hand-role-flat"] {
display: inline-block;
width: auto;
height: 18px;
margin: 0 8px -4px 0;
border: none;
background: transparent;
box-shadow: none;
vertical-align: baseline;
filter: brightness(0) invert(0.75);
}
/* BvB.svg has wider negative space than the others, so it reads bigger
at the shared 18px height. Trim a couple pixels so it visually matches
the rest of the family. */
.pld-root .docs-prose img[src*="BvB"] {
height: 15px;
}
/* Inline room-logo icons (Winamax, future PokerStars, etc.) rendered next
to the room name in body copy. Small, baseline-aligned, no halo/border —
the icon is decorative, the surrounding word is the actual content.
Triggered by the `room-logo/` path so authors just need to drop in
 inline in markdown. */
.pld-root .docs-prose img[src*="room-logo"] {
display: inline-block;
width: auto;
height: 18px;
margin: 0 6px -4px 0;
border: none;
border-radius: 3px;
background: transparent;
box-shadow: none;
vertical-align: baseline;
}
/* Filter-panel section screenshots — narrower than full-width prose
captures (these are individual tab views from a side modal, so they
read at ~70% width without losing legibility) and centered. */
.pld-root .docs-prose img[src*="section_"] {
max-width: 70%;
margin: 18px auto 24px;
}
/* Specific-hand picker (Alt+click sub-modal) — even narrower; this is
a tiny popover in the actual UI, full-width prose would dwarf it. */
.pld-root .docs-prose img[src*="specific_"] {
max-width: 60%;
margin: 18px auto 24px;
}
/* Range Builder screenshots — full editor / modal / data-grid views
that are visually rich; constrained to keep the page rhythm tight. */
.pld-root .docs-prose img[src*="/range_builder/"] {
max-width: 78%;
margin: 18px auto 24px;
}
/* Modal/compact screenshots — half width, centered, with the same
"floating halo" recipe used on the landing carousel slides (inset
highlight + outer ring + deep black drop + wide teal glow). Triggered
by the `modal_` filename prefix so authors don't need raw HTML in
the .md. */
.pld-root .docs-prose img[src*="modal_"] {
max-width: 50%;
margin: 28px auto 36px;
border: none;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 0 0 1px rgba(255, 255, 255, 0.06),
0 25px 60px -10px rgba(0, 0, 0, 0.85),
0 0 120px rgba(42, 157, 143, 0.18);
}
/* === Lightbox (click-to-zoom) for documentation screenshots ===
Activated by the client component sitting inside
`.docs-chapter`. Any image whose src starts with `/images/docs/` becomes
clickable; inline icons (room-logo, hand-role-flat, icons/shared, cards)
stay non-interactive on purpose. The cursor `zoom-in` hint is set on the
image directly via path-based selectors. */
.pld-root .docs-prose img[src*="/images/docs/"],
.pld-root .docs-rowgrid img {
cursor: zoom-in;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.pld-root .docs-prose img[src*="/images/docs/"]:hover,
.pld-root .docs-rowgrid img:hover {
transform: translateY(-1px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(42, 157, 143, 0.35);
}
.docs-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
background: rgba(0, 0, 0, 0.92);
cursor: zoom-out;
animation: docs-lightbox-fade 180ms ease both;
}
@keyframes docs-lightbox-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.docs-lightbox-img {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
cursor: default;
animation: docs-lightbox-zoom 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes docs-lightbox-zoom {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.docs-lightbox-close {
position: absolute;
top: 18px;
right: 22px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.docs-lightbox-close:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.45);
color: #fff;
}
@media (max-width: 600px) {
.docs-lightbox { padding: 16px; }
.docs-lightbox-close { top: 12px; right: 12px; }
}
/* === Panel pair (Session + Tournoi side-by-side) and panel solo (Main) ===
Right-pane previews of the contextual details panel, illustrating how it
adapts to the selected hierarchy level. The pair sits in a 2-column grid
so Session/Tournoi read as variations of the same idea; the Main panel
sits below at single-column width since it's a distinct, taller artifact
(full hand history). Both reset the default .docs-prose img frame so the
labels + frames match the .docs-rowgrid family above. */
.pld-root .docs-panelpair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 24px 0 24px;
}
.pld-root .docs-panelpair-item,
.pld-root .docs-panelsolo {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 14px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: var(--bg-elev);
}
.pld-root .docs-panelsolo {
max-width: 357px;
margin: 16px auto 28px;
}
.pld-root .docs-panelpair-label,
.pld-root .docs-panelsolo-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.7;
padding-left: 2px;
}
.pld-root .docs-panelpair img,
.pld-root .docs-panelsolo img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bg-card);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 720px) {
.pld-root .docs-panelpair {
grid-template-columns: 1fr;
}
}
/* === Drill-down row preview (Session → Tournoi → Main) ===
Three captioned row screenshots stacked vertically, each labeled with
its hierarchy level. Subtle chevrons (↓) between rows reinforce the
"double-click to descend" mental model used in the chapter. The
wrapper resets the default .docs-prose img frame so the rows feel
like UI fragments rather than standalone screenshots. */
.pld-root .docs-rowgrid {
display: flex;
flex-direction: column;
gap: 4px;
margin: 24px 0 28px;
padding: 18px 16px 14px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: var(--bg-elev);
}
.pld-root .docs-rowgrid-step {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
position: relative;
}
.pld-root .docs-rowgrid-step + .docs-rowgrid-step {
margin-top: 18px;
}
.pld-root .docs-rowgrid-step + .docs-rowgrid-step::before {
content: "↓";
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
color: var(--ink-2);
opacity: 0.55;
font-size: 14px;
line-height: 1;
pointer-events: none;
}
.pld-root .docs-rowgrid-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.7;
padding-left: 2px;
}
.pld-root .docs-rowgrid img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bg-card);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* === ScoringIllustration component (tilted range card + hand + verdict) ===
Concrete spot example for the COR/UPD/OPD/MDO section. Mirrors the
landing's RangeCarousel: a 13×13 range card with title + position pill
+ stack chip + legend, framed in the same .rc-card slab style and tilted
with the same isometric transform. Hero's hole cards float upright in
the foreground (no tilt), with a verdict pill anchored to their bottom
right corner. */
.pld-root .docs-scoring-illu {
position: relative;
width: 100%;
height: 380px;
margin: 28px 0 36px;
border-radius: 14px;
background: var(--bg-elev);
border: 1px solid var(--line-soft);
overflow: hidden;
perspective: 2000px;
isolation: isolate;
}
/* Stage carries the iso tilt — same recipe as .range-carousel-stage. */
.pld-root .docs-scoring-illu-stage {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: rotateX(38deg) rotateZ(-12deg);
display: flex;
align-items: center;
justify-content: center;
}
/* Range card — copy of .rc-card visuals so the docs read in the same
language as the landing carousel cards. */
.pld-root .docs-scoring-illu-card {
width: 280px;
height: 320px;
background: #0a0d10;
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow:
0 1px 0 rgba(255, 252, 242, 0.04) inset,
-2px 4px 0 -1px #0a0d10,
-3px 6px 0 -1px rgba(255, 252, 242, 0.05),
-4px 8px 0 -1px #0a0d10,
-5px 10px 0 -1px rgba(255, 252, 242, 0.05),
-7px 14px 0 -2px #0a0d10,
-9px 18px 0 -3px rgba(255, 252, 242, 0.04),
-12px 24px 32px rgba(0, 0, 0, 0.55);
}
.pld-root .docs-scoring-illu-head {
display: flex;
flex-direction: column;
gap: 6px;
}
.pld-root .docs-scoring-illu-title {
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.01em;
}
.pld-root .docs-scoring-illu-meta {
display: flex;
gap: 6px;
align-items: center;
}
.pld-root .docs-scoring-illu-pos {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: rgba(42, 157, 143, 0.12);
color: var(--accent);
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
letter-spacing: 0.08em;
font-weight: 600;
}
.pld-root .docs-scoring-illu-stack {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 4px;
background: rgba(255, 252, 242, 0.06);
color: var(--ink-2);
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
letter-spacing: 0.04em;
}
.pld-root .docs-scoring-illu-matrix {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: 1px;
flex: 1;
min-height: 0;
}
.pld-root .docs-scoring-illu-cell {
aspect-ratio: 1;
background: #161c20;
border-radius: 1px;
}
/* Active cells get their color via custom properties from the React
component — keeps the data-driven values out of the inline style block
so the linter is happy. */
.pld-root .docs-scoring-illu-cell.is-active {
background-color: var(--cell-color);
opacity: var(--cell-opacity);
}
/* Hero's hand cell gets a teal accent ring so the eye links the matrix
cell to the cards in the foreground. */
.pld-root .docs-scoring-illu-cell.is-hero {
box-shadow: 0 0 0 1.5px var(--accent);
border-radius: 2px;
}
.pld-root .docs-scoring-illu-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 4px;
border-top: 1px solid var(--line-soft);
}
.pld-root .docs-scoring-illu-legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 9px;
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pld-root .docs-scoring-illu-legend-swatch {
width: 8px;
height: 8px;
border-radius: 1px;
background-color: var(--swatch-color);
}
/* Foreground hole cards — sibling of the stage, floating slightly above
the bottom-right portion of the tilted range card (in screen space).
Upright (no tilt) so they pop out as the focal point. */
.pld-root .docs-scoring-illu-cards {
position: absolute;
bottom: 90px;
right: 60px;
z-index: 5;
pointer-events: none;
}
/* Inner wrapper hugs the cards so the verdict pill can anchor to their
bottom-right corner via simple absolute positioning. */
.pld-root .docs-scoring-illu-cards-inner {
position: relative;
display: flex;
align-items: center;
}
.pld-root .docs-scoring-illu-handcard {
/* Hand cards 25% smaller than the original draft (96 → 72) so they
don't dominate over the tilted range card. */
width: 72px;
height: auto;
filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
}
.pld-root .docs-scoring-illu-handcard.is-back {
z-index: 1;
}
.pld-root .docs-scoring-illu-handcard.is-front {
/* Overlap scaled with card width so the rank corner of the left card
(T) stays fully visible behind the right card (9). */
margin-left: -27px;
z-index: 2;
}
/* Verdict pill, anchored to the bottom-right corner of the cards inner
wrapper. All paddings/font scaled 25% down to match the cards. */
.pld-root .docs-scoring-illu-pill {
position: absolute;
bottom: -8px;
right: -16px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
background: rgba(239, 79, 79, 0.16);
border: 1px solid rgba(239, 79, 79, 0.45);
border-radius: 999px;
color: var(--red);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
z-index: 6;
pointer-events: auto;
box-shadow:
0 6px 14px -6px rgba(239, 79, 79, 0.45),
0 0 18px rgba(239, 79, 79, 0.18);
}
.pld-root .docs-scoring-illu-pill-icon {
width: 11px;
height: 11px;
/* Tint the black source SVG to match var(--red) #ef4f4f. */
filter: brightness(0) saturate(100%) invert(45%) sepia(72%) saturate(2940%)
hue-rotate(335deg) brightness(98%) contrast(94%);
}
/* On narrow viewports, scale the whole composition down so it doesn't
clip the prose column. */
@media (max-width: 720px) {
.pld-root .docs-scoring-illu {
height: 320px;
}
.pld-root .docs-scoring-illu-card {
width: 240px;
height: 280px;
}
.pld-root .docs-scoring-illu-cards {
bottom: 70px;
right: 40px;
}
.pld-root .docs-scoring-illu-handcard {
width: 60px;
}
.pld-root .docs-scoring-illu-handcard.is-front {
margin-left: -22px;
}
}
/* === RolesIllustration component (scattered constellation of roles) ===
Three depth planes (near / mid / far) emulate camera depth-of-field:
.is-near = sharp + larger + opaque, .is-far = small blur + reduced
opacity. Each chip carries its own teal halo, and the container has
a subtle radial vignette so the cluster reads as floating in space
rather than glued to the page background. */
.pld-root .docs-roles-illu {
position: relative;
width: 100%;
height: 280px;
margin: 28px 0 36px;
border-radius: 14px;
background: var(--bg-elev);
border: 1px solid var(--line-soft);
overflow: hidden;
isolation: isolate;
}
.pld-root .docs-roles-illu-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 40%, rgba(42, 157, 143, 0.10) 0%, transparent 55%),
radial-gradient(circle at 75% 65%, rgba(42, 157, 143, 0.07) 0%, transparent 50%);
pointer-events: none;
}
.pld-root .docs-roles-illu-chip {
position: absolute;
/* Per-chip x/y/rotation are passed as CSS custom properties from the
React component (--chip-x, --chip-y, --chip-rot) — keeps the inline
style minimal and the layout logic in the CSS. */
left: var(--chip-x);
top: var(--chip-y);
transform: translate(-50%, -50%) rotate(var(--chip-rot));
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 12px;
background: var(--bg-card);
border: 1px solid var(--line);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 12px 24px -12px rgba(0, 0, 0, 0.7);
transition: transform 0.3s ease;
}
.pld-root .docs-roles-illu-chip.is-near {
width: 56px;
height: 56px;
z-index: 3;
}
.pld-root .docs-roles-illu-chip.is-mid {
width: 48px;
height: 48px;
opacity: 0.85;
z-index: 2;
}
.pld-root .docs-roles-illu-chip.is-far {
width: 42px;
height: 42px;
opacity: 0.55;
filter: blur(1.2px);
z-index: 1;
}
.pld-root .docs-roles-illu-halo {
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(42, 157, 143, 0.22) 0%,
rgba(42, 157, 143, 0.08) 45%,
rgba(42, 157, 143, 0) 70%
);
filter: blur(2px);
pointer-events: none;
z-index: -1;
}
.pld-root .docs-roles-illu-icon {
width: 60%;
height: 60%;
object-fit: contain;
/* Same recipe as .docs-prose img[src*="hand-role-flat"] — black source
SVG tinted to neutral light grey. */
filter: brightness(0) invert(0.78);
}
/* On narrow viewports, give the canvas a bit more breathing room and
shrink the chips proportionally so they don't overlap. */
@media (max-width: 720px) {
.pld-root .docs-roles-illu {
height: 240px;
}
.pld-root .docs-roles-illu-chip.is-near {
width: 46px;
height: 46px;
}
.pld-root .docs-roles-illu-chip.is-mid {
width: 40px;
height: 40px;
}
.pld-root .docs-roles-illu-chip.is-far {
width: 34px;
height: 34px;
}
}
/* === ProcessFlow component (linear step illustration) ===
Same visual language as the circular "Travaille. Décide. Apprends."
illustration on the landing — accent eyebrow + halo'd icon + sublabel —
but laid out horizontally with dashed connectors between cards. */
.pld-root .docs-flow {
display: grid;
/* 4 cards (1fr) interleaved with 3 connector tracks (60px). Cards
share remaining width equally; connectors are fixed-width tracks
so the dashed line has room to render. Cells 1/3/5/7 are cards,
2/4/6 are connectors. */
grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr;
align-items: center;
margin: 28px 0 36px;
}
@media (max-width: 720px) {
.pld-root .docs-flow {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
}
.pld-root .docs-flow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 18px 12px 16px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 12px;
min-width: 0;
}
.pld-root .docs-flow-eyebrow {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 14px;
}
.pld-root .docs-flow-num {
color: var(--ink-3);
}
.pld-root .docs-flow-label {
color: var(--accent);
font-weight: 600;
}
.pld-root .docs-flow-asterisk {
color: var(--ink-3);
margin-left: 1px;
}
.pld-root .docs-flow-icon {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.pld-root .docs-flow-halo {
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(42, 157, 143, 0.16) 0%,
rgba(42, 157, 143, 0.05) 45%,
rgba(42, 157, 143, 0) 75%
);
filter: blur(4px);
}
.pld-root .docs-flow-icon-inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--accent);
filter: drop-shadow(0 0 6px rgba(42, 157, 143, 0.22));
}
.pld-root .docs-flow-icon-inner svg {
width: 22px;
height: 22px;
}
.pld-root .docs-flow-sublabel {
color: var(--ink-2);
font-size: 13px;
line-height: 1.4;
max-width: 14ch;
}
/* Dashed teal connector between cards. On desktop it's a horizontal
track; on mobile we collapse the grid to one column and hide the
connectors (the vertical stack reads on its own). */
.pld-root .docs-flow-connector {
height: 0;
border-top: 1.5px dashed rgba(42, 157, 143, 0.35);
margin: 0 8px;
align-self: center;
}
@media (max-width: 720px) {
.pld-root .docs-flow-connector {
display: none;
}
}
/* Prev / Next chapter pager at the bottom of every chapter page. */
.pld-root .docs-chapter-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--line-soft);
}
.pld-root .docs-chapter-nav-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease;
}
.pld-root .docs-chapter-nav-link:hover {
border-color: rgba(42, 157, 143, 0.45);
}
.pld-root .docs-chapter-nav-link.is-next {
text-align: right;
}
.pld-root .docs-chapter-nav-dir {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.pld-root .docs-chapter-nav-title {
font-size: 14px;
color: var(--ink);
}
/* ---- Mobile: sidebar collapses above the content ---- */
@media (max-width: 980px) {
.pld-root .docs-wrap {
grid-template-columns: 1fr;
gap: 24px;
}
.pld-root .docs-sidebar {
position: static;
max-height: none;
padding-right: 0;
}
.pld-root .docs-home-cards {
grid-template-columns: 1fr;
}
.pld-root .docs-chapter-nav {
grid-template-columns: 1fr;
}
}
/* burger caché desktop */
.pld-root .nav-burger {
display: none;
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
width: 40px;
height: 40px;
position: relative;
justify-self: end;
z-index: 2;
-webkit-appearance: none;
appearance: none;
}
.pld-root .nav-burger span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
margin: 4px auto;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.pld-root .nav-burger.is-open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.pld-root .nav-burger.is-open span:nth-child(2) {
opacity: 0;
}
.pld-root .nav-burger.is-open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* drawer caché par défaut */
.pld-root .nav-mobile-drawer {
display: none;
}
.pld-root .nav-mobile-drawer.is-open {
display: block;
}
.pld-root .nav-mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border: 0;
padding: 0;
cursor: pointer;
z-index: 40;
}
.pld-root .nav-mobile-panel {
position: fixed;
top: 64px;
left: 0;
right: 0;
background: #101418;
border-bottom: 1px solid var(--line-soft);
padding: 24px 32px 32px;
display: flex;
flex-direction: column;
gap: 18px;
z-index: 41;
font-size: 1.1rem;
}
.pld-root .nav-mobile-panel a {
color: var(--ink);
font-weight: 500;
padding: 8px 0;
border-bottom: 1px solid var(--line-soft);
}
.pld-root .nav-mobile-cta {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.pld-root .nav-mobile-cta a {
border-bottom: 0;
padding: 0;
}
.pld-root .nav-mobile-cta .signin {
text-align: center;
padding: 12px 0;
color: var(--ink-2);
}
.pld-root .nav-mobile-cta .btn-primary {
justify-content: center;
}
/* activation burger sous 980px (cohérent avec breakpoint existant) */
@media (max-width: 980px) {
.pld-root .nav-burger {
display: block;
}
.pld-root .nav-cta {
display: none;
}
.pld-root .nav .wrap {
grid-template-columns: 1fr auto;
}
}
/* logo réduit sous 480px ; panneau aligné sur la gouttière min de .wrap */
@media (max-width: 480px) {
.pld-root .nav .brand img {
height: 32px;
}
.pld-root .nav-mobile-panel {
padding: 20px 20px 28px;
}
}
/* ============================================================
DEMO PRODUIT — strip icônes mobile + drawer toolpanel
============================================================ */
@media (max-width: 768px) {
}