) */
background: transparent;
border: none;
font-family: inherit;
appearance: none;
}
.pld-root .demo-tab:hover {
color: var(--ink);
}
.pld-root .demo-tab:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 1px;
}
.pld-root .demo-tab.active {
background: #161c20;
color: var(--ink);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.pld-root .demo-tab .dn {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-3);
}
.pld-root .demo-screen {
background: #0a0d10;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9);
}
.pld-root .demo-screen-head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--line-soft);
background: #0c1115;
}
.pld-root .traf {
display: flex;
gap: 6px;
}
.pld-root .traf i {
width: 11px;
height: 11px;
border-radius: 50%;
display: block;
}
.pld-root .traf i:nth-child(1) {
background: #ff5f57;
}
.pld-root .traf i:nth-child(2) {
background: #febc2e;
}
.pld-root .traf i:nth-child(3) {
background: #28c840;
}
.pld-root .demo-screen-head .url {
flex: 1;
background: #0a0d10;
border: 1px solid var(--line-soft);
padding: 5px 10px;
border-radius: 6px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--ink-3);
}
/* in-app mock layout */
.pld-root .app {
display: grid;
grid-template-columns: 220px 1fr 320px;
min-height: 520px;
}
/* replayer variant: full-width Konva replayer + right ToolPanel
The whole stage is zoomed down to 0.82 — the production replayer is
designed for full-screen so its chrome (header, history rows, player
stat cards, control bar) is too dense for a 640px landing frame. */
.pld-root .app.app-replayer {
grid-template-columns: 1fr;
height: 640px;
min-height: 640px;
}
.pld-root .app-replayer-stage {
position: relative;
min-width: 0;
min-height: 0;
background: #0a0d10;
overflow: hidden;
zoom: 0.82;
}
.pld-root .app-side {
background: #080b0e;
border-right: 1px solid var(--line-soft);
padding: 20px 14px;
}
.pld-root .app-side .grp {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 18px 8px 8px;
}
.pld-root .app-side .item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
color: var(--ink-2);
font-size: 13px;
cursor: pointer;
}
.pld-root .app-side .item.active {
background: #101418;
color: var(--ink);
}
.pld-root .app-side .item .ic {
width: 14px;
height: 14px;
border-radius: 4px;
background: #1c2329;
}
.pld-root .app-side .item.active .ic {
background: var(--accent);
}
.pld-root .app-main {
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.pld-root .app-main .crumb {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pld-root .app-main h3 {
margin: 0;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
}
/* poker table */
.pld-root .table-wrap {
aspect-ratio: 16 / 10;
background: radial-gradient(60% 80% at 50% 50%, #1a3a30 0%, #0e2620 60%, #07120e 100%);
border-radius: 140px / 100px;
border: 1px solid #1a3a30;
position: relative;
box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.pld-root .seat {
position: absolute;
width: 74px;
text-align: center;
transform: translate(-50%, -50%);
font-size: 11px;
}
.pld-root .seat .av {
width: 34px;
height: 34px;
border-radius: 50%;
background: #1c2329;
border: 2px solid #0e2620;
margin: 0 auto 4px;
display: grid;
place-items: center;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--ink-2);
}
.pld-root .seat .nm {
color: var(--ink-2);
font-size: 10px;
line-height: 1.2;
}
.pld-root .seat .stk {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--accent);
}
.pld-root .seat.hero .av {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.25);
}
.pld-root .seat.hero .nm {
color: var(--ink);
}
.pld-root .pot {
position: absolute;
left: 50%;
top: 38%;
transform: translate(-50%, -50%);
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.08em;
}
.pld-root .pot b {
color: var(--ink);
font-weight: 500;
}
.pld-root .board {
position: absolute;
left: 50%;
top: 54%;
transform: translate(-50%, -50%);
display: flex;
gap: 6px;
}
.pld-root .card {
width: 30px;
height: 42px;
border-radius: 4px;
background: #fafaf7;
color: #0a0a0a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-geist), sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 1;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.pld-root .card.r {
color: #c0202b;
}
.pld-root .card .s {
font-size: 11px;
margin-top: 1px;
}
.pld-root .card.back {
background: linear-gradient(135deg, #1a3a30, #0a2018);
border: 1px solid #0a2018;
color: transparent;
}
/* right panel: lesson notes */
.pld-root .app-aside {
background: #080b0e;
border-left: 1px solid var(--line-soft);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.pld-root .app-aside .ah {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pld-root .lesson {
background: #0c1115;
border: 1px solid var(--line-soft);
border-radius: 10px;
padding: 13px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-2);
}
.pld-root .lesson b {
color: var(--ink);
font-weight: 500;
display: block;
margin-bottom: 4px;
font-size: 13px;
}
.pld-root .lesson .tg {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.pld-root .lesson .tg span {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
padding: 2px 7px;
border-radius: 4px;
background: #161c20;
color: var(--ink-3);
}
.pld-root .lesson.high {
border-color: rgba(42, 157, 143, 0.3);
background: linear-gradient(180deg, rgba(42, 157, 143, 0.06), #0c1115);
}
.pld-root .lesson.high b {
color: var(--accent);
}
/* mini stat row */
.pld-root .stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.pld-root .stat {
background: #0c1115;
border: 1px solid var(--line-soft);
border-radius: 10px;
padding: 14px;
}
.pld-root .stat .l {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pld-root .stat .v {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
margin-top: 4px;
}
.pld-root .stat .v .delta {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--accent);
margin-left: 6px;
}
.pld-root .stat .v .delta.neg {
color: #ff8a8a;
}
/* ---------- FEATURES ---------- */
.pld-root .feat-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.pld-root .feat {
grid-column: span 6;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 3px;
padding: 32px;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.pld-root .feat:hover {
border-color: #283037;
}
.pld-root .feat.tall {
grid-column: span 6;
min-height: 420px;
}
.pld-root .feat.wide {
grid-column: span 12;
}
.pld-root .feat .feat-tag {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.pld-root .feat h3 {
margin: 14px 0 8px;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.015em;
}
.pld-root .feat p {
margin: 0;
color: var(--ink-2);
font-size: 15px;
max-width: 440px;
}
.pld-root .feat .feat-art {
margin-top: 28px;
}
/* range builder — horizontal isometric layer-stack */
.pld-root .builder {
display: block;
padding: 0;
}
.pld-root .range-carousel {
position: relative;
width: 100%;
height: 380px;
perspective: 2000px;
overflow: hidden;
}
.pld-root .range-carousel-stage {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/* Static iso tilt — cards spread along this rotated X axis below. */
transform: rotateX(38deg) rotateZ(-12deg);
}
.pld-root .range-card-3d {
position: absolute;
top: 50%;
left: 50%;
width: 240px;
height: 280px;
margin: -140px 0 0 -120px;
/* Cards spread along stage's local X axis, centered on the middle. */
transform: translateX(calc((var(--i, 0) - 2.5) * 90px));
}
.pld-root .rc-card {
width: 100%;
height: 100%;
background: #0a0d10;
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
/* Layered slab thickness: stacked offset shadows fake the side face
of the card under the iso tilt, so each card reads as a 3D layer. */
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 .rc-card-head {
display: flex;
flex-direction: column;
gap: 6px;
}
.pld-root .rc-card-title {
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.01em;
}
.pld-root .rc-card-meta {
display: flex;
gap: 6px;
align-items: center;
}
.pld-root .rc-pos-pill {
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 .rc-stack-chip {
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 .rc-matrix {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: 1px;
flex: 1;
min-height: 0;
}
.pld-root .rc-cell {
aspect-ratio: 1;
background: #161c20;
border-radius: 1px;
}
.pld-root .rc-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 4px;
border-top: 1px solid var(--line-soft);
}
.pld-root .rc-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 .rc-legend-swatch {
width: 8px;
height: 8px;
border-radius: 2px;
}
/* notebook — feat-lessons split (text left, scatter right) */
.pld-root .feat.wide.feat-lessons {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 40px;
align-items: center;
}
.pld-root .feat-lessons-text {
display: flex;
flex-direction: column;
}
.pld-root .feat-art.lessons-art {
margin-top: 0;
align-self: stretch;
display: flex;
}
/* Scatter composition: lesson icon centered, sources/questions/range
floating around at varying blur to convey depth-of-field. */
.pld-root .lessons-scatter {
position: relative;
width: 100%;
min-height: 380px;
flex: 1;
/* Soft radial vignette pulling the eye toward the centre. */
background:
radial-gradient(
circle at 50% 50%,
rgba(42, 157, 143, 0.08) 0%,
rgba(42, 157, 143, 0) 55%
);
}
/* Centre — lesson.svg with a teal glow halo. Sharp, opaque, draws the
gaze. Positioned at 50/50 via translate so resizing stays centred. */
.pld-root .ls-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.pld-root .ls-center-halo {
position: absolute;
inset: -20px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(42, 157, 143, 0.35) 0%,
rgba(42, 157, 143, 0.12) 40%,
rgba(42, 157, 143, 0) 70%
);
filter: blur(6px);
}
.pld-root .ls-center-icon {
position: relative;
width: 64px;
height: 64px;
filter:
invert(1) brightness(1.1)
drop-shadow(0 0 12px rgba(42, 157, 143, 0.55));
}
/* Generic scatter slot — each child positions itself via top/left and
carries its own blur+opacity. transform-origin centred so any per-item
rotation tilts around the slot's middle. */
.pld-root .ls-item {
position: absolute;
filter: blur(var(--ls-blur, 0px));
opacity: var(--ls-opacity, 1);
transform: rotate(var(--ls-tilt, 0deg));
transform-origin: center;
pointer-events: none;
}
/* Per-item placements. Coordinates tuned so the centre icon sits in a
visual void surrounded by the props. */
.pld-root .ls-item-youtube {
top: 8%;
left: 6%;
--ls-blur: 1.6px;
--ls-opacity: 0.55;
--ls-tilt: -6deg;
}
.pld-root .ls-item-wsop {
top: 4%;
right: 8%;
--ls-blur: 0.6px;
--ls-opacity: 0.7;
--ls-tilt: 4deg;
}
.pld-root .ls-item-q1 {
top: 32%;
left: 0%;
--ls-blur: 0px;
--ls-opacity: 0.95;
--ls-tilt: -3deg;
z-index: 6;
}
.pld-root .ls-item-range {
top: 24%;
right: 0%;
--ls-blur: 0px;
--ls-opacity: 0.95;
--ls-tilt: 3deg;
z-index: 6;
}
.pld-root .ls-item-twitch {
bottom: 8%;
left: 4%;
--ls-blur: 2.2px;
--ls-opacity: 0.45;
--ls-tilt: -8deg;
}
.pld-root .ls-item-q2 {
bottom: 12%;
left: 32%;
--ls-blur: 0.5px;
--ls-opacity: 0.85;
--ls-tilt: 2deg;
z-index: 5;
}
.pld-root .ls-item-gto {
bottom: 6%;
right: 4%;
--ls-blur: 1.2px;
--ls-opacity: 0.55;
--ls-tilt: 5deg;
}
.pld-root .ls-item-coaching {
top: 62%;
left: 14%;
--ls-blur: 0.9px;
--ls-opacity: 0.65;
--ls-tilt: -4deg;
}
/* Logo / pill cards — dark capsule with brand mark. */
.pld-root .ls-logo {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #0d1115;
border: 1px solid var(--line-soft);
border-radius: 8px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-2);
white-space: nowrap;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 18px rgba(0, 0, 0, 0.4);
}
.pld-root .ls-logo-wsop {
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 10px 14px;
}
.pld-root .ls-wsop-mark {
font-family: var(--font-instrument-serif), serif;
font-size: 22px;
font-style: italic;
color: #c8a44a;
letter-spacing: 0.02em;
line-height: 1;
}
.pld-root .ls-wsop-sub {
font-size: 9px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.pld-root .ls-coaching-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px rgba(42, 157, 143, 0.6);
}
/* Question bubbles — chat-style cards. Primary is the loud one (sharp
border + accent corner), secondary is muted (subtle frame). */
.pld-root .ls-bubble {
position: relative;
max-width: 220px;
padding: 12px 16px;
background: #0d1115;
border: 1px solid var(--line-soft);
border-radius: 10px;
font-family: var(--font-instrument-serif), serif;
font-style: italic;
font-size: 16px;
line-height: 1.35;
color: var(--ink);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 12px 24px rgba(0, 0, 0, 0.5);
}
.pld-root .ls-bubble-quote {
font-size: 28px;
color: var(--accent);
line-height: 0.5;
margin-right: 4px;
vertical-align: -8px;
}
.pld-root .ls-bubble-primary {
border-color: rgba(42, 157, 143, 0.35);
}
.pld-root .ls-bubble-primary::before {
content: '';
position: absolute;
left: 14px;
bottom: -6px;
width: 10px;
height: 10px;
background: #0d1115;
border-right: 1px solid rgba(42, 157, 143, 0.35);
border-bottom: 1px solid rgba(42, 157, 143, 0.35);
transform: rotate(45deg);
}
.pld-root .ls-bubble-secondary {
font-size: 14px;
color: var(--ink-2);
}
/* Mini range thumb — same colour language as the carousel cards but
stripped down (no legend, no per-row labels). */
.pld-root .ls-range-thumb {
width: 168px;
background: #0d1115;
border: 1px solid var(--line-soft);
border-radius: 10px;
padding: 10px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 14px 26px rgba(0, 0, 0, 0.55);
}
.pld-root .ls-range-thumb-title {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-2);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.pld-root .ls-range-thumb-grid {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: 1px;
aspect-ratio: 1;
}
.pld-root .ls-range-thumb-cell {
background: #181c20;
border-radius: 1px;
}
/* Mobile — stack the split, shrink the scatter. */
@media (max-width: 980px) {
.pld-root .feat.wide.feat-lessons {
grid-template-columns: 1fr;
gap: 24px;
}
.pld-root .lessons-scatter {
min-height: 320px;
}
.pld-root .ls-bubble {
max-width: 180px;
font-size: 14px;
}
}
/* solver / analyse préflop — disconnected floating cards */
.pld-root .feat-art.solver {
padding: 0;
}
.pld-root .ap-stack {
position: relative;
width: 100%;
height: 460px;
perspective: 1800px;
transform-style: preserve-3d;
}
.pld-root .ap-card {
position: absolute;
width: calc(var(--natural-w, 800px) * var(--scale, 0.5));
height: calc(var(--natural-h, 500px) * var(--scale, 0.5));
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
/* Stacked depth + brand glow, same recipe as PositionScoreCardView's
"floating" elevation so the cards feel native to the rest of the app. */
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 0 0 1px rgba(255, 255, 255, 0.04),
0 18px 40px -8px rgba(0, 0, 0, 0.7),
0 0 90px rgba(42, 157, 143, 0.12);
transform-style: preserve-3d;
}
.pld-root .ap-card-inner {
width: var(--natural-w, 800px);
height: var(--natural-h, 500px);
transform: scale(var(--scale, 0.5));
transform-origin: top left;
pointer-events: none; /* illustration only — no interaction */
}
.pld-root .ap-card-radar {
top: 0;
right: 0;
transform: rotateY(-8deg) rotateX(2deg) translateZ(-30px);
z-index: 1;
}
.pld-root .ap-card-detail {
top: 90px;
left: 0;
transform: rotateY(7deg) rotateX(-1deg) translateZ(40px);
z-index: 3;
}
.pld-root .ap-card-hands {
top: 240px;
right: 24px;
transform: rotateY(-5deg) rotateX(-2deg) translateZ(-10px);
z-index: 2;
}
/* mobile : un seul PositionScoreCardView en remplacement du stack 3D */
.pld-root .ap-mobile {
width: 100%;
}
/* ---------- HOW IT WORKS ---------- */
.pld-root .steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.pld-root .step {
border: 1px solid var(--line-soft);
border-radius: 3px;
padding: 28px;
background: linear-gradient(180deg, #0c1014 0%, #08090c 100%);
position: relative;
}
.pld-root .step .sn {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 13px;
color: var(--accent);
letter-spacing: 0.1em;
}
.pld-root .step h4 {
margin: 18px 0 8px;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.01em;
}
.pld-root .step p {
margin: 0;
color: var(--ink-2);
font-size: 14px;
line-height: 1.55;
}
.pld-root .step .step-art {
margin-top: 24px;
height: 120px;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: #0a0d10;
display: grid;
place-items: center;
color: var(--ink-3);
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.05em;
overflow: hidden;
position: relative;
}
/* Step 01 — Importe tes mains: scattered hand-cards + .txt files cluster.
Same depth-of-field language as LessonsScatter, packed into a circular
silhouette to evoke a pile of raw hand histories landing for import. */
.pld-root .step-art.step-art-import {
height: 280px;
border: none;
background:
radial-gradient(
circle at 50% 50%,
rgba(42, 157, 143, 0.06) 0%,
rgba(42, 157, 143, 0) 60%
);
padding: 0;
}
.pld-root .hands-import-scatter {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
/* Each scatter slot reads its own --x / --y / --blur / --tilt / --opacity
vars. Centered via translate so (top,left) = element midpoint, which
makes the polar layout below readable. */
.pld-root .hi-hand,
.pld-root .hi-file {
position: absolute;
top: var(--y);
left: var(--x);
filter: blur(var(--hi-blur, 0));
opacity: var(--hi-opacity, 1);
transform: translate(-50%, -50%) rotate(var(--hi-tilt, 0deg));
pointer-events: none;
}
/* Hand = two card faces, slightly fanned so they read as a holding. */
.pld-root .hi-hand {
display: flex;
}
.pld-root .hi-card {
width: 30px;
height: 42px;
background-color: #ffffff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 3px;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.4) inset,
0 6px 14px rgba(0, 0, 0, 0.55);
}
.pld-root .hi-card-back {
transform: rotate(-6deg);
z-index: 1;
}
.pld-root .hi-card-front {
margin-left: -10px;
transform: rotate(6deg);
z-index: 2;
}
/* .txt file with Winamax logo. Cream-paper bg + folded top-right corner
(::before triangle) + faux text content lines + ".TXT" footer. */
.pld-root .hi-file {
width: 60px;
height: 72px;
background: #f4eee0;
border-radius: 3px 8px 3px 3px;
display: flex;
flex-direction: column;
padding: 8px 7px 5px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 8px 16px rgba(0, 0, 0, 0.6);
}
.pld-root .hi-file::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
background: linear-gradient(
225deg,
transparent 50%,
#d8cdb3 50%
);
}
.pld-root .hi-file-logo {
width: 20px;
height: 20px;
object-fit: contain;
margin-bottom: 5px;
}
.pld-root .hi-file-lines {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.pld-root .hi-file-lines span {
display: block;
height: 2px;
background: #b8ad95;
border-radius: 1px;
}
.pld-root .hi-file-lines span:nth-child(1) { width: 100%; }
.pld-root .hi-file-lines span:nth-child(2) { width: 80%; }
.pld-root .hi-file-lines span:nth-child(3) { width: 60%; }
.pld-root .hi-file-name {
margin-top: 4px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 8px;
color: #1a1a1a;
letter-spacing: 0.1em;
font-weight: 700;
align-self: flex-end;
}
/* Per-element placement: polar coordinates expressed as % offsets from
the centre of the cluster. Outer ring (8 cardinal/diagonal slots) at
~42% radius; mid ring (5 slots) at ~22% radius; one element near
centre fills the cluster's middle. Blurs grade with distance: sharp
inner cards anchor the eye, blurrier outer ones add depth. */
/* Outer ring — 4 .txt files at the diagonals (45°/135°/225°/315°) */
.pld-root .hi-file-1 { /* top-left 225° */
--x: 22%; --y: 22%;
--hi-blur: 1.4px; --hi-opacity: 0.6; --hi-tilt: -10deg;
}
.pld-root .hi-file-2 { /* top-right 315° */
--x: 78%; --y: 22%;
--hi-blur: 0.4px; --hi-opacity: 0.85; --hi-tilt: 8deg;
}
.pld-root .hi-file-3 { /* btm-right 45° */
--x: 78%; --y: 78%;
--hi-blur: 1.8px; --hi-opacity: 0.5; --hi-tilt: 12deg;
}
.pld-root .hi-file-4 { /* btm-left 135° */
--x: 22%; --y: 78%;
--hi-blur: 0.9px; --hi-opacity: 0.72; --hi-tilt: -6deg;
}
/* Outer ring — 4 hands at the cardinals (0°/90°/180°/270°) */
.pld-root .hi-hand-1 { /* top 270° */
--x: 50%; --y: 8%;
--hi-blur: 0.4px; --hi-opacity: 0.85; --hi-tilt: -3deg;
}
.pld-root .hi-hand-3 { /* left 180° */
--x: 8%; --y: 50%;
--hi-blur: 1.4px; --hi-opacity: 0.55; --hi-tilt: -14deg;
}
.pld-root .hi-hand-4 { /* right 0° */
--x: 92%; --y: 50%;
--hi-blur: 0.7px; --hi-opacity: 0.78; --hi-tilt: 14deg;
}
.pld-root .hi-hand-5 { /* btm 90° */
--x: 50%; --y: 92%;
--hi-blur: 0.6px; --hi-opacity: 0.8; --hi-tilt: 4deg;
}
/* Mid ring — 5 hands packing the inner band */
.pld-root .hi-hand-6 {
--x: 36%; --y: 30%;
--hi-blur: 0; --hi-opacity: 1; --hi-tilt: -4deg; z-index: 5;
}
.pld-root .hi-hand-7 {
--x: 64%; --y: 30%;
--hi-blur: 0; --hi-opacity: 1; --hi-tilt: 5deg; z-index: 5;
}
.pld-root .hi-hand-8 {
--x: 32%; --y: 60%;
--hi-blur: 0.2px; --hi-opacity: 0.95; --hi-tilt: 8deg; z-index: 5;
}
.pld-root .hi-hand-9 {
--x: 68%; --y: 60%;
--hi-blur: 0.3px; --hi-opacity: 0.92; --hi-tilt: -6deg; z-index: 5;
}
.pld-root .hi-hand-10 {
--x: 50%; --y: 70%;
--hi-blur: 0; --hi-opacity: 1; --hi-tilt: 2deg; z-index: 6;
}
/* Centre — sharpest hand, anchors the cluster */
.pld-root .hi-hand-2 {
--x: 50%; --y: 45%;
--hi-blur: 0; --hi-opacity: 1; --hi-tilt: -2deg; z-index: 7;
}
/* ----------------------------------------------------------------------
Step 02 — Travaille. Décide. Apprends.
Three nodes (voir / comprendre / retenir) arranged in a triangle and
joined by clockwise SVG arrows; a dashed ring behind the nodes hints
at the "boucle courte" copy without competing for attention. */
.pld-root .step-art.step-art-loop {
height: 280px;
border: none;
background:
radial-gradient(
circle at 50% 50%,
rgba(42, 157, 143, 0.06) 0%,
rgba(42, 157, 143, 0) 60%
);
padding: 0;
}
.pld-root .work-loop {
position: relative;
width: 100%;
height: 100%;
}
/* Dashed ring — sits at the centre, sized just inside the node positions
so it reads as "the loop they're on". Subtle: low alpha, dashed. */
.pld-root .wl-ring {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
border-radius: 50%;
border: 1px dashed rgba(42, 157, 143, 0.32);
}
/* Loop nodes — dark cards with a thin accent border, centred on their
slot via translate(-50%,-50%). Slots sit at 12 / 4 / 8 o'clock around
the dashed ring. */
.pld-root .wl-node {
position: absolute;
top: var(--wl-y);
left: var(--wl-x);
width: 112px;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 10px 12px;
background: #0d1115;
border: 1px solid rgba(42, 157, 143, 0.35);
border-radius: 8px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 14px 28px rgba(0, 0, 0, 0.55);
z-index: 5;
}
.pld-root .wl-node-analyser { --wl-x: 50%; --wl-y: 22%; }
.pld-root .wl-node-comprendre { --wl-x: 78%; --wl-y: 72%; }
.pld-root .wl-node-retenir { --wl-x: 22%; --wl-y: 72%; }
.pld-root .wl-tag {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
}
.pld-root .wl-tag-step {
color: var(--accent);
font-weight: 600;
}
.pld-root .wl-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(42, 157, 143, 0.08);
color: var(--accent);
}
/* lesson.svg is filled-black by default → invert + tint with a teal
drop-shadow so it reads on the dark card and matches the other icons. */
.pld-root .wl-lesson-icon {
filter: invert(1) brightness(1.1)
drop-shadow(0 0 4px rgba(42, 157, 143, 0.5));
}
/* Mini 3×3 range-matrix icon for the "Comprendre" node. Cells are
coloured roughly like the real range-builder palette. */
.pld-root .wl-matrix-icon {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 2px;
width: 28px;
height: 28px;
}
.pld-root .wl-matrix-icon span {
display: block;
border-radius: 1px;
}
.pld-root .wl-caption {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 9px;
letter-spacing: 0.04em;
color: var(--ink-3);
}
/* ----------------------------------------------------------------------
Step 03 — Maintenant, crush.
Two visual layers only: a blurred ascending curve in the background +
a shiny gold trophy centred on top. */
.pld-root .step-art.step-art-crush {
height: 280px;
border: none;
background:
radial-gradient(
circle at 50% 60%,
rgba(245, 185, 66, 0.07) 0%,
rgba(245, 185, 66, 0) 60%
);
padding: 0;
position: relative;
}
.pld-root .crush-hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Curve fills the whole stage. preserveAspectRatio="none" + 100% on both
axes means the curve stretches with whatever width the step gets. */
.pld-root .ch-curve {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Trophy wrapper centres the SVG and lets us hang shadows + glow on the
wrapper rather than fight SVG filter chains. */
.pld-root .ch-trophy-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
filter:
drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 22px rgba(245, 185, 66, 0.4));
}
.pld-root .ch-trophy {
display: block;
}
/* ---------- FAQ ---------- */
.pld-root .faq-wrap {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: start;
}
.pld-root .faq-item {
border-bottom: 1px solid var(--line-soft);
padding: 18px 0;
cursor: pointer;
}
.pld-root .faq-item summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.01em;
}
.pld-root .faq-item summary::-webkit-details-marker {
display: none;
}
.pld-root .faq-item summary .qn {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--ink-3);
margin-right: 14px;
}
.pld-root .faq-item[open] summary .pl {
transform: rotate(45deg);
}
.pld-root .faq-item .pl {
font-size: 18px;
color: var(--ink-3);
transition: transform 0.2s ease;
}
.pld-root .faq-item .ans {
margin-top: 12px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.6;
max-width: 560px;
}
/* ---------- CTA FINAL ---------- */
.pld-root .cta {
margin: 80px 0;
border: 1px solid var(--line);
border-radius: 24px;
background:
radial-gradient(60% 80% at 50% 100%, rgba(42, 157, 143, 0.18), transparent 60%),
linear-gradient(180deg, #0c1014, #080b0e);
padding: 80px 32px;
text-align: center;
position: relative;
overflow: hidden;
}
.pld-root .cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(42, 157, 143, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(42, 157, 143, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 60% 60% at 50% 100%, black, transparent);
-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 100%, black, transparent);
}
.pld-root .cta-inner {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto;
}
.pld-root .cta h2 {
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 500;
margin: 14px 0 0;
text-wrap: balance;
}
.pld-root .cta h2 em {
font-family: var(--font-instrument-serif), serif;
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.pld-root .cta p {
margin: 18px auto 32px;
color: var(--ink-2);
font-size: 17px;
max-width: 520px;
}
.pld-root .cta .btn-row {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
/* ---------- ANJ BANNER ---------- */
.pld-root .anj-banner {
width: 100%;
background: #ffe800;
color: #111;
display: flex;
align-items: stretch;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pld-root .anj-msg {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.pld-root .anj-msg span {
display: block;
}
.pld-root .anj-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
background: #ffe800;
}
.pld-root .anj-icon .jis {
width: 34px;
height: 34px;
border-radius: 50%;
background: #f08c00;
display: grid;
place-items: center;
color: #fff;
font-weight: 900;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pld-root .anj-gouv {
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 18px;
flex-shrink: 0;
}
.pld-root .anj-gouv img {
height: 54px;
width: auto;
display: block;
}
@media (max-width: 760px) {
.pld-root .anj-msg {
font-size: 11px;
padding: 8px 12px;
}
.pld-root .anj-gouv img {
height: 42px;
}
}
/* ---------- FOOTER ---------- */
.pld-root footer {
border-top: 1px solid var(--line-soft);
padding: 48px 0 28px;
color: var(--ink-3);
font-size: 13px;
position: relative;
z-index: 2;
}
.pld-root .foot-min {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
margin-bottom: 36px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line-soft);
}
.pld-root .foot-min-l {
max-width: 480px;
}
.pld-root .foot-tag {
margin: 14px 0 0;
line-height: 1.55;
color: var(--ink-3);
}
/* Footer logo — same SVG as the navbar, slightly smaller for visual
hierarchy. Override the .brand-mark gap (10px) used by the legacy
inline-mark version: we don't have a sibling text now, just the img. */
.pld-root footer .brand {
gap: 0;
}
.pld-root footer .brand img {
display: block;
height: 32px;
width: auto;
object-fit: contain;
}
/* "Fait avec ❤ à Paris" mini-line. Inline-flex so the heart sits on
the baseline; lighter than .foot-tag to read as a quiet flourish. */
.pld-root .foot-craft {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--ink-3);
}
.pld-root .foot-heart {
color: #ef4444;
flex-shrink: 0;
}
.pld-root .foot-bot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.pld-root .foot-bot .left {
display: flex;
gap: 24px;
align-items: center;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.05em;
flex-wrap: wrap;
}
.pld-root .foot-bot .left a,
.pld-root .foot-bot .left button {
color: var(--ink-3);
}
.pld-root .foot-bot .left a:hover,
.pld-root .foot-bot .left button:hover {
color: var(--ink);
}
.pld-root .foot-social {
display: flex;
gap: 14px;
align-items: center;
}
.pld-root .foot-social-link {
color: var(--ink-3);
display: inline-flex;
transition: color 0.2s ease;
}
.pld-root .foot-social-link:hover {
color: var(--ink);
}
/* icône monochrome via mask → colorée par currentColor (hérite du lien) */
.pld-root .foot-social-icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: url('/images/icons/shared/discord-circle.svg') center / contain
no-repeat;
mask: url('/images/icons/shared/discord-circle.svg') center / contain
no-repeat;
}
.pld-root .resp {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.06em;
display: flex;
align-items: center;
gap: 8px;
}
.pld-root .resp .dt {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--warn);
}
/* responsive (best-effort within artboard width) */
@media (max-width: 980px) {
.pld-root .hero {
padding: 48px 0 72px;
min-height: 0;
}
.pld-root .hero-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.pld-root .car-dots {
order: -1;
margin-top: 0;
margin-bottom: 24px;
}
/* mobile : grid-stack — toutes les slides dans une même cellule, container =
hauteur de la slide la plus haute, plus de fixed height qui déborde */
.pld-root .carousel {
height: auto;
display: grid;
grid-template-areas: "stack";
}
.pld-root .slide {
position: relative;
inset: auto;
grid-area: stack;
justify-content: flex-start;
}
.pld-root .problem-wrap,
.pld-root .faq-wrap {
grid-template-columns: 1fr;
gap: 40px;
}
.pld-root .feat-grid > .feat,
.pld-root .feat-grid > .feat.tall {
grid-column: span 12;
}
.pld-root .steps {
grid-template-columns: 1fr;
}
.pld-root .app {
grid-template-columns: 1fr;
}
.pld-root .app-side,
.pld-root .app-aside {
display: none;
}
.pld-root .foot-min {
flex-direction: column;
gap: 16px;
}
.pld-root .nav-links {
display: none;
}
.pld-root .nav .wrap {
grid-template-columns: 1fr auto;
}
.pld-root .nav-cta {
justify-self: end;
}
}
/* === Floating halo across all carousel slides ===
Slide 1 (data-slide="0") gets it via PositionScoreCardView's
`elevation="floating"` prop, so we don't double-apply here. The other
slides reuse the exact same multi-layer shadow:
· inset top highlight (catches light)
· 1 px outer ring (separates the card from the near-black bg)
· deep black drop (depth)
· wide teal halo (brand-cohesive glow) */
.pld-root .slide[data-slide="1"] > *,
.pld-root .slide[data-slide="2"] > *,
.pld-root .slide[data-slide="3"] > * {
border-radius: 12px;
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);
}
/* Slide 5 has two visible panels (chart + overlapping calendar) inside a
transparent wrapper, so apply the halo per-panel rather than at the
wrapper level. Use !important to win against MUI's own panel boxShadow. */
.pld-root .pf-chart-wrap > .MuiBox-root,
.pld-root .pf-calendar-wrap > .MuiBox-root {
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) !important;
}
/* slide 5 — progression financière (chart + calendar overlap)
Layout target (cf. brouillon):
┌────────────────────────────┐
│ ┌─────── chart ────┐ │ chart : large mais court (≈ 65 %
│ │ wide & short │ │ de la largeur, ≈ 320 px haut)
│ └──────────────────┘ │
│ ┌─ calendar ─┐ │ calendar : haut et droit, déborde
│ │ tall & │ │ au-dessus + en-dessous
│ │ wide │ │ du panneau du graphique
│ │ │ │
│ └────────────┘ │
└────────────────────────────┘ */
.pld-root .slide.slide-progress-fin {
/* keep the default flex column layout from .slide so the chart is
vertically centered inside the slide. */
justify-content: center;
}
.pld-root .pf-wrap {
position: relative;
width: 100%;
}
.pld-root .pf-chart-wrap {
width: 65%;
}
/* Trim the inner card padding/margin so the chart panel hugs the slide. */
.pld-root .pf-chart-wrap > .MuiBox-root {
margin-bottom: 0;
}
/* Force the chart canvas — the inner Box that wraps recharts — to be shorter
so the panel reads "wide & short" instead of the default ~300 px tall. */
.pld-root .pf-chart-wrap .MuiBox-root:has(> .recharts-responsive-container) {
height: 180px !important;
}
.pld-root .pf-calendar-wrap {
position: absolute;
top: 50%;
right: -8px;
width: 50%;
height: 400px;
transform: translateY(-50%);
z-index: 2;
/* Pure presentation — clicking a day would otherwise drill into a DayView
that fires a /api/profile/top-performances request. */
pointer-events: none;
/* Halo applied per-panel below (.pf-floating-halo block). */
}
.pld-root .pf-calendar-wrap > .MuiBox-root {
height: 100%;
}
/* Shrink the calendar's internal typography for the landing-page demo —
the live /profile component is meant for a much wider container, so its
default sizes feel oversized inside the carousel. */
.pld-root .pf-calendar-wrap .MuiTypography-root,
.pld-root .pf-calendar-wrap .MuiBox-root {
font-size: 0.6rem !important;
line-height: 1.15 !important;
}
.pld-root .pf-calendar-wrap .MuiTypography-subtitle1 {
font-size: 0.75rem !important;
}
.pld-root .pf-calendar-wrap .MuiSvgIcon-fontSizeSmall {
font-size: 0.9rem !important;
}
@media (max-width: 980px) {
.pld-root .pf-chart-wrap {
width: 100%;
}
.pld-root .pf-chart-wrap .MuiBox-root:has(> .recharts-responsive-container) {
height: 220px !important;
}
.pld-root .pf-calendar-wrap {
position: static;
width: 100%;
height: auto;
margin-top: 12px;
transform: none;
pointer-events: auto;
filter: none;
}
.pld-root .pf-calendar-wrap > .MuiBox-root {
height: auto;
}
}
/* ========================================================================
Legal pages — /mentions-legales, /cgu, /confidentialite, /contact.
Single-column long-form layout that reuses LandingShell's nav + footer.
The header echoes the section heads from the marketing page (sec-num
eyebrow + serif italic accent on the h1) so the typography reads as
"still Pokerlines" without competing with the landing's denser layout.
======================================================================== */
.pld-root .legal-page {
padding: 96px 0 80px;
}
.pld-root .legal-head {
max-width: 720px;
margin: 0 0 56px;
}
.pld-root .legal-head h1 {
margin: 14px 0 16px;
font-size: clamp(36px, 5vw, 56px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.05;
}
.pld-root .legal-head h1 em {
font-family: var(--font-instrument-serif), serif;
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.pld-root .legal-sub {
color: var(--ink-2);
font-size: 15px;
line-height: 1.6;
max-width: 640px;
}
.pld-root .legal-body {
max-width: 720px;
}
.pld-root .legal-body section + section {
margin-top: 48px;
}
.pld-root .legal-body h2 {
margin: 0 0 16px;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
position: relative;
padding-left: 14px;
}
.pld-root .legal-body h2::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
background: var(--accent);
border-radius: 1px;
}
/* Sub-sections inside long-form legal sections (used in /confidentialite
to split "Données collectées" and "Cookies" into categories). */
.pld-root .legal-body h3 {
margin: 24px 0 8px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.pld-root .legal-body p {
margin: 0 0 14px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.65;
}
.pld-root .legal-body p:last-child {
margin-bottom: 0;
}
.pld-root .legal-body strong {
color: var(--ink);
font-weight: 500;
}
.pld-root .legal-body a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: rgba(42, 157, 143, 0.4);
text-underline-offset: 3px;
transition: text-decoration-color 0.15s ease;
}
.pld-root .legal-body a:hover {
text-decoration-color: var(--accent);
}
/* Definition list used for the editor / hosting blocks. Two-column grid
on desktop (label / value), stacks below 640px. */
.pld-root .legal-dl {
display: flex;
flex-direction: column;
gap: 8px;
margin: 16px 0 0;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--line-soft);
border-radius: 4px;
}
.pld-root .legal-dl > div {
display: grid;
grid-template-columns: 220px 1fr;
gap: 16px;
align-items: baseline;
}
.pld-root .legal-dl dt {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
}
.pld-root .legal-dl dd {
margin: 0;
font-size: 14px;
color: var(--ink);
line-height: 1.5;
}
.pld-root .legal-updated {
margin-top: 64px !important;
padding-top: 24px;
border-top: 1px solid var(--line-soft);
font-family: var(--font-jetbrains-mono), monospace;
font-size: 12px !important;
letter-spacing: 0.04em;
color: var(--ink-3) !important;
}
/* In-content bullet list (used inside sections of CGU / Confidentialité). */
.pld-root .legal-body .legal-list {
margin: 0 0 14px;
padding-left: 22px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.65;
}
.pld-root .legal-body .legal-list li {
margin-bottom: 6px;
}
.pld-root .legal-body .legal-list li::marker {
color: var(--accent);
}
/* Sommaire — sticky-ish TOC at the top of long-form pages (CGU,
Confidentialité). 2-column grid on desktop so the list reads compactly
without scrolling, single column on mobile. */
.pld-root .legal-toc {
max-width: 720px;
margin: 0 0 64px;
padding: 24px 28px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--line-soft);
border-radius: 4px;
}
.pld-root .legal-toc-title {
display: block;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.pld-root .legal-toc ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 24px;
}
.pld-root .legal-toc li {
margin: 0;
}
.pld-root .legal-toc a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 4px 0;
color: var(--ink-2);
font-size: 14px;
line-height: 1.4;
text-decoration: none;
transition: color 0.15s ease;
}
.pld-root .legal-toc a:hover {
color: var(--ink);
}
.pld-root .legal-toc-num {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
color: var(--accent);
letter-spacing: 0.04em;
flex-shrink: 0;
min-width: 22px;
}
/* Anchor scroll-margin so jumps don't slide content under the nav.
`--nav-height` is roughly the navbar's resolved height (no CSS var
exposed for it today, so an approximation is fine). */
.pld-root .legal-body section {
scroll-margin-top: 88px;
}
@media (max-width: 720px) {
.pld-root .legal-toc ol {
grid-template-columns: 1fr;
}
}
/* Contact page — same chrome as the legal pages, card grid above the
long-form sections. */
.pld-root .contact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 0 0 56px;
max-width: 720px;
}
.pld-root .contact-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: start;
padding: 22px 24px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.pld-root .contact-card:hover {
border-color: rgba(42, 157, 143, 0.45);
transform: translateY(-1px);
}
.pld-root .contact-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(42, 157, 143, 0.1);
color: var(--accent);
flex-shrink: 0;
}
.pld-root .contact-card-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.pld-root .contact-card-tag {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.pld-root .contact-card h3 {
margin: 0;
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
word-break: break-word;
}
.pld-root .contact-card p {
margin: 4px 0 0;
color: var(--ink-2);
font-size: 14px;
line-height: 1.55;
}
.pld-root .contact-card-arrow {
align-self: center;
font-size: 20px;
color: var(--ink-3);
transition: color 0.15s ease, transform 0.15s ease;
}
.pld-root .contact-card:hover .contact-card-arrow {
color: var(--accent);
transform: translateX(2px);
}
/* Long-form Contact body sits in the same .legal-body system as the
other legal pages but spaced a bit tighter since the cards already
carry the visual weight. */
.pld-root .contact-topics section + section {
margin-top: 36px;
}
@media (max-width: 720px) {
.pld-root .contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.pld-root .legal-page {
padding: 72px 0 64px;
}
.pld-root .legal-dl > div {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* ========================================================================
Documentation — /docs
Two-column layout: sticky sidebar (TOC) on the left, content on the
right. Reuses the marketing landing's design tokens (colours, fonts,
accent) so the doc reads as the same product, just in long-form.
======================================================================== */
.pld-root .docs-page {
padding: 56px 0 96px;
}
.pld-root .docs-wrap {
display: grid;
grid-template-columns: 280px 1fr;
gap: 56px;
align-items: start;
}
/* ---- Sidebar ---- */
.pld-root .docs-sidebar {
position: sticky;
top: 24px;
align-self: start;
/* Slightly less than viewport height so it never covers the navbar. */
max-height: calc(100vh - 48px);
overflow-y: auto;
scrollbar-width: thin;
padding-right: 8px;
}
.pld-root .docs-sidebar-inner {
display: flex;
flex-direction: column;
gap: 24px;
}
.pld-root .docs-sidebar-home {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
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-sidebar-home:hover {
border-color: rgba(42, 157, 143, 0.45);
}
.pld-root .docs-sidebar-home-tag {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.pld-root .docs-sidebar-home-title {
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.pld-root .docs-sidebar-nav {
display: flex;
flex-direction: column;
gap: 22px;
}
.pld-root .docs-sidebar-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.pld-root .docs-sidebar-group-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
padding-left: 2px;
}
.pld-root .docs-sidebar-group-letter {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 3px;
background: rgba(42, 157, 143, 0.15);
color: var(--accent);
font-size: 10px;
font-weight: 600;
}
.pld-root .docs-sidebar-group ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.pld-root .docs-sidebar-item a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 12px;
color: var(--ink-2);
font-size: 13px;
line-height: 1.4;
text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.pld-root .docs-sidebar-item a:hover {
color: var(--ink);
}
.pld-root .docs-sidebar-item.is-active a {
color: var(--accent);
border-left-color: var(--accent);
background: rgba(42, 157, 143, 0.06);
}
.pld-root .docs-sidebar-num {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.04em;
flex-shrink: 0;
min-width: 22px;
}
.pld-root .docs-sidebar-item.is-active .docs-sidebar-num {
color: var(--accent);
}
/* ---- Content area ---- */
.pld-root .docs-content {
max-width: 760px;
min-width: 0; /* prevents grid blowout when long unbreakable strings appear */
}
/* ---- Home / overview ---- */
.pld-root .docs-home-head {
margin-bottom: 64px;
}
.pld-root .docs-home-head h1 {
margin: 14px 0 16px;
font-size: clamp(36px, 5vw, 56px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.05;
}
.pld-root .docs-home-head h1 em {
font-family: var(--font-instrument-serif), serif;
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.pld-root .docs-home-sub {
color: var(--ink-2);
font-size: 15px;
line-height: 1.6;
max-width: 640px;
}
.pld-root .docs-home-groups {
display: flex;
flex-direction: column;
gap: 56px;
}
.pld-root .docs-home-group-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
}
.pld-root .docs-home-group-letter {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 3px;
background: rgba(42, 157, 143, 0.15);
color: var(--accent);
font-size: 11px;
font-weight: 700;
}
.pld-root .docs-home-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* The Introduction group only holds one chapter — render it as a single
full-width card so it doesn't sit awkwardly in half a row. */
.pld-root .docs-home-groups > .docs-home-group:first-child .docs-home-cards {
grid-template-columns: 1fr;
}
.pld-root .docs-home-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 22px 22px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.pld-root .docs-home-card:hover {
border-color: rgba(42, 157, 143, 0.45);
transform: translateY(-1px);
}
.pld-root .docs-home-card-num {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--accent);
}
.pld-root .docs-home-card h3 {
margin: 4px 0 0;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
}
.pld-root .docs-home-card p {
margin: 4px 0 0;
color: var(--ink-2);
font-size: 13px;
line-height: 1.5;
}
.pld-root .docs-home-card-arrow {
position: absolute;
top: 18px;
right: 20px;
font-size: 18px;
color: var(--ink-3);
transition: color 0.15s ease, transform 0.15s ease;
}
.pld-root .docs-home-card:hover .docs-home-card-arrow {
color: var(--accent);
transform: translateX(2px);
}
/* ---- Single chapter (stub view) ---- */
.pld-root .docs-chapter-head {
margin-bottom: 40px;
}
.pld-root .docs-chapter-num {
display: inline-block;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 12px;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 12px;
}
.pld-root .docs-chapter-head h1 {
margin: 0 0 14px;
font-size: clamp(30px, 4vw, 44px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
}
.pld-root .docs-chapter-blurb {
color: var(--ink-2);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.pld-root .docs-chapter-outline {
margin: 0 0 32px;
padding: 22px 26px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--line-soft);
border-radius: 4px;
}
.pld-root .docs-chapter-outline-title {
display: block;
font-family: var(--font-jetbrains-mono), monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.pld-root .docs-chapter-outline ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.pld-root .docs-chapter-outline li {
display: flex;
align-items: baseline;
gap: 12px;
font-size: 14px;
line-height: 1.5;
color: var(--ink-2);
}
.pld-root .docs-chapter-outline-num {
font-family: var(--font-jetbrains-mono), monospace;
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.04em;
flex-shrink: 0;
min-width: 24px;
}
.pld-root .docs-chapter-stub {
margin: 0 0 56px;
padding: 18px 22px;
border-left: 2px solid rgba(42, 157, 143, 0.4);
background: rgba(42, 157, 143, 0.04);
border-radius: 0 4px 4px 0;
}
.pld-root .docs-chapter-stub p {
margin: 0;
color: var(--ink-2);
font-size: 14px;
line-height: 1.6;
}
/* Long-form chapter prose — sits inside .legal-body so it inherits the
shared typography (h2 accent bar, paragraph colour, etc.). The
markdown source ships plain
/
/, 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;
}
}
/* ============================================================
NAV mobile — burger + drawer
============================================================ */
/* 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 + padding wrap sous 480px */
@media (max-width: 480px) {
.pld-root .nav .brand img {
height: 32px;
}
.pld-root .wrap {
padding: 0 16px;
}
.pld-root .nav-mobile-panel {
padding: 20px 16px 28px;
}
}
@media (max-width: 360px) {
.pld-root .wrap {
padding: 0 12px;
}
}
/* ============================================================
HERO — cascades mobile (carousel + dots + gap)
============================================================ */
@media (max-width: 640px) {
.pld-root .hero-grid {
gap: 32px;
}
.pld-root .hero-meta {
gap: 16px;
}
.pld-root .dot-btn {
padding: 6px 8px;
}
.pld-root .dot-btn span {
font-size: 8px;
}
.pld-root .dot-btn b {
font-size: 10px;
}
}
@media (max-width: 480px) {
.pld-root .hero {
padding: 32px 0 56px;
}
.pld-root .hero-sub {
font-size: 16px;
}
.pld-root .car-dots {
gap: 4px;
}
.pld-root .dot-btn b {
font-size: 9px;
}
}
/* ============================================================
DEMO PRODUIT — strip icônes mobile + drawer toolpanel
============================================================ */
.pld-root .ir-mobile-tabs {
display: none;
}
.pld-root .ir-drawer-backdrop {
display: none;
}
.pld-root .ir-drawer-close {
display: none;
}
@media (max-width: 768px) {
/* masque le strip texte+numéros desktop */
.pld-root .demo-tabs {
display: none;
}
/* strip d'icônes au-dessus du Konva */
.pld-root .ir-mobile-tabs {
display: block;
flex-shrink: 0;
background: #0a0d10;
border-bottom: 1px solid var(--line-soft);
}
/* tool panel devient drawer absolute depuis la droite
!important pour battre les styles inline générés par MUI sx={{ width: 360 }} */
.pld-root .ir-toolpanel {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 88% !important;
max-width: 360px !important;
height: 100% !important;
z-index: 25;
transform: translateX(100%);
transition: transform 0.25s ease;
box-shadow: -16px 0 32px -8px rgba(0, 0, 0, 0.5);
}
.pld-root .ir-toolpanel.is-open {
transform: translateX(0);
}
.pld-root .ir-drawer-backdrop {
display: block;
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
border: 0;
padding: 0;
cursor: pointer;
z-index: 20;
}
.pld-root .ir-drawer-close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 8px;
left: 8px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 30;
padding: 0;
-webkit-appearance: none;
appearance: none;
}
/* dézoom le stage replayer en mobile (le zoom 0.82 desktop écrase tout) */
.pld-root .app-replayer-stage {
zoom: 1;
width: 100%;
}
/* hauteur container augmentée pour mobile */
.pld-root .app.app-replayer {
height: 640px;
min-height: 640px;
width: 100%;
}
/* demo-stage en fullbleed : retire padding/border/border-radius
et neutralise le padding latéral du .wrap parent via margins négatives */
#product .wrap {
padding-left: 0;
padding-right: 0;
}
/* la sec-head garde son padding intérieur — on le réapplique au wrap-level
uniquement à l'élément texte */
#product .sec-head {
padding-left: 16px;
padding-right: 16px;
}
.pld-root .demo-stage {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
margin-top: 32px;
}
.pld-root .demo-screen {
border-radius: 0;
border-left: 0;
border-right: 0;
width: 100%;
}
/* URL bar mockup compactly sized */
.pld-root .demo-screen-head .url {
font-size: 10px;
padding: 4px 8px;
}
}
@media (max-width: 480px) {
#product .sec-head {
padding-left: 12px;
padding-right: 12px;
}
}