/* ============================================================================= MADATA · Documentation développeur : feuille de style ----------------------------------------------------------------------------- Artefact : docs / API reference. Public : intégrateurs, développeurs, équipes techniques des espaces MADATA. Positionnement : technique, direct, sans esbroufe : une doc qu'on lit vite. Adjectifs : imprimé, net, tramé (pixel), fiable, ivoirien-violet. Essence : « la doc sort de l'imprimante ». Système ------- - Couleur (OKLCH, 60-30-10) : neutre violet très sombre (dominante) · violet MADATA (marque) · ambre du ticket (accent tranchant, réservé aux états « écriture » / actifs / au faisceau d'impression). - Typo : IBM Plex Sans (texte), IBM Plex Serif (prose longue / chapô), IBM Plex Mono (code, endpoints), Silkscreen (bitmap : UNIQUEMENT titres de page, cartouches, libellés de navigation : le « listing »). - Mise en page : Wikipédia mode sombre : colonne de navigation fixe à gauche, colonne de lecture ~62rem, « Récépissé » (sommaire) à droite ≥ 1200px. - Move signature : tout le site est un ticket continu : entête déchirée en dents de scie, séparateurs = perforations, blocs de code = sortie thermique. - Motion : impression du ticket au héros (steps()), curseur clignotant. Tout est neutralisé sous prefers-reduced-motion. ============================================================================= */ /* Polices chargées via dans le (cf. scripts/dev-docs/build.mjs) : IBM Plex Sans / Serif / Mono + Silkscreen. */ /* ----------------------------------------------------------------- tokens --- */ :root { color-scheme: dark; /* Neutres : near-black teinté violet, rampe d'élévation par la clarté */ --bg: oklch(0.155 0.018 305); --surface-1: oklch(0.195 0.020 305); --surface-2: oklch(0.235 0.022 305); --surface-3: oklch(0.285 0.024 305); --fg: oklch(0.940 0.008 305); --fg-muted: oklch(0.735 0.020 305); --fg-faint: oklch(0.640 0.022 305); /* AA sur --bg même en petit corps */ --border: oklch(0.330 0.022 305); --border-strong: oklch(0.420 0.028 305); /* Marque : violet MADATA (#6B21A8), sibling clarifié/désaturé pour le sombre */ --brand: oklch(0.640 0.170 305); --brand-dim: oklch(0.470 0.130 305); --brand-wash: oklch(0.320 0.070 305); --link: oklch(0.760 0.110 305); --link-hover: oklch(0.850 0.090 305); /* Accent : ambre du ticket (#f5b544). Réservé : 10 %. */ --accent: oklch(0.815 0.135 78); --accent-dim: oklch(0.600 0.100 66); --accent-wash: oklch(0.330 0.045 70); /* États sémantiques (jamais la couleur seule) */ --ok: oklch(0.760 0.140 155); --warn: oklch(0.815 0.135 78); --danger:oklch(0.680 0.170 25); /* Typo */ --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --font-serif: 'IBM Plex Serif', ui-serif, Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-pixel: 'Silkscreen', var(--font-mono); /* Échelle typographique : ratio 1.25, base 1rem (16px) */ --step--1: 0.8rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.5625rem; --step-3: 1.953rem; --step-4: 2.441rem; /* Espace : base 0.5rem */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4.5rem; /* Rayon : deux valeurs, angles francs (un ticket ne se biseaute pas) */ --r-sm: 3px; --r-md: 6px; /* Élévation : une seule approche : bord défini. Pas d'ombre diffuse. */ --edge: 1px solid var(--border); /* Gouttières de mise en page */ --nav-w: 16.5rem; --toc-w: 14rem; --measure: 62rem; /* Motion */ --dur-1: 120ms; --dur-2: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1); } /* ------------------------------------------------------------------ reset --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--step-0); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img, svg { max-width: 100%; } [hidden] { display: none !important; } a { color: var(--link); text-decoration: none; text-underline-offset: 0.15em; transition: color var(--dur-1) var(--ease); } a:hover { color: var(--link-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ============================================================ paper grain === */ /* Trame « papier thermique » très discrète sur le fond : la seule texture. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent 0 3px, oklch(0.98 0 0 / 0.012) 3px 4px ); } /* ================================================================ layout === */ .masthead { position: sticky; top: 0; z-index: 40; } .shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); align-items: start; max-width: 96rem; margin: 0 auto; } .page { min-width: 0; padding: var(--sp-8) var(--sp-6) var(--sp-10); display: grid; grid-template-columns: minmax(0, var(--measure)) var(--toc-w); gap: var(--sp-8); } .page > article { min-width: 0; max-width: var(--measure); } @media (max-width: 1200px) { .page { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .sidenav { display: none; } .page { padding: var(--sp-6) var(--sp-4) var(--sp-8); } } /* ============================================================== masthead === */ .bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--surface-1); border-bottom: var(--edge); } .bar__brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-pixel); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--fg); } .bar__brand:hover { text-decoration: none; color: var(--fg); } .bar__mark { width: 26px; height: 26px; display: block; image-rendering: pixelated; } .bar__tag { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-faint); border-left: var(--edge); padding-left: var(--sp-4); } .bar__spacer { flex: 1; } .bar__link { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-muted); } .bar__lang { font-family: var(--font-pixel); font-size: 0.62rem; letter-spacing: 0.03em; color: var(--fg-muted); border: var(--edge); border-radius: var(--r-sm); padding: 3px 8px; min-height: 24px; display: inline-flex; align-items: center; } .bar__lang:hover { color: var(--fg); border-color: var(--border-strong); text-decoration: none; } .bar__burger { display: none; appearance: none; background: var(--surface-2); border: var(--edge); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-pixel); font-size: 0.7rem; padding: var(--sp-2) var(--sp-3); cursor: pointer; } @media (max-width: 900px) { .bar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); } .bar__burger { display: inline-block; } .bar__tag, .bar__link { display: none; } .bar__lang { font-size: 0.58rem; padding: 3px 6px; } } /* dents de scie : le haut du ticket */ .tear { height: 10px; background: var(--surface-1); -webkit-mask: var(--tear-mask); mask: var(--tear-mask); --tear-mask: repeating-linear-gradient(-45deg, #000 0 7px, transparent 7px 14px); } .tear--flip { transform: scaleY(-1); } /* ================================================================ sidenav === */ .sidenav { position: sticky; top: 3.25rem; align-self: start; height: calc(100vh - 3.25rem); overflow-y: auto; padding: var(--sp-6) var(--sp-4) var(--sp-8) var(--sp-5); border-right: var(--edge); background: color-mix(in oklab, var(--bg), var(--surface-1) 40%); font-size: var(--step--1); } .sidenav__group { margin-bottom: var(--sp-5); } .sidenav__title { font-family: var(--font-pixel); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 var(--sp-2); padding-left: var(--sp-2); } .sidenav ul { list-style: none; margin: 0; padding: 0; } .sidenav li { margin: 1px 0; } .sidenav a { display: block; padding: var(--sp-2) var(--sp-2); border-left: 2px solid transparent; color: var(--fg-muted); line-height: 1.4; } .sidenav a:hover { color: var(--fg); background: var(--surface-1); text-decoration: none; } .sidenav a[aria-current="page"] { color: var(--fg); border-left-color: var(--accent); background: var(--surface-1); font-weight: 600; } @media (max-width: 900px) { .sidenav.is-open { display: block; position: fixed; inset: 3.25rem 0 0 0; height: auto; z-index: 39; border-right: none; border-bottom: var(--edge); background: var(--bg); } } /* ================================================================== TOC ==== */ .toc { position: sticky; top: 5rem; align-self: start; font-size: var(--step--1); border-left: var(--edge); padding-left: var(--sp-4); } .toc__title { font-family: var(--font-pixel); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 var(--sp-3); } .toc ul { list-style: none; margin: 0; padding: 0; } .toc li { margin: 2px 0; } .toc a { display: block; padding: 2px 0; color: var(--fg-faint); line-height: 1.35; } .toc a:hover { color: var(--fg-muted); text-decoration: none; } .toc a.is-active { color: var(--accent); } .toc li.lvl-3 { padding-left: var(--sp-3); } /* ================================================================ hero ===== */ .hero { border: var(--edge); border-radius: var(--r-md); background: radial-gradient(120% 140% at 82% 0%, var(--brand-wash) 0%, transparent 55%), var(--surface-1); padding: var(--sp-6); margin-bottom: var(--sp-8); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; position: relative; overflow: hidden; } .hero::after { /* vignette scanline : héros uniquement */ content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, oklch(0 0 0 / 0.14) 2px 3px); mix-blend-mode: multiply; } .hero__kicker { font-family: var(--font-pixel); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--accent); text-transform: uppercase; margin: 0 0 var(--sp-3); } .hero h1 { margin: 0 0 var(--sp-3); } .hero p { margin: 0; color: var(--fg-muted); max-width: 46ch; } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; } .hero__art { order: -1; justify-self: start; } } /* imprimante pixel + ticket qui sort */ .printer { width: 132px; height: 150px; image-rendering: pixelated; display: block; } .printer .slot { fill: oklch(0 0 0 / 0.55); } .printer .ticket { transform: translateY(0); animation: feed 6s var(--ease) infinite; } .printer .beam { animation: beam 6s steps(1) infinite; } .printer .led { animation: led 1.4s steps(1) infinite; } @keyframes feed { 0%, 55% { transform: translateY(0); } 70% { transform: translateY(-46px); } /* le ticket est arraché */ 72% { transform: translateY(-46px); } 92%, 100%{ transform: translateY(0); } /* le suivant sort */ } @keyframes beam { 0%, 72% { opacity: 0; } 76%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes led { 0% { opacity: 1; } 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .printer .ticket { animation: none; transform: translateY(0); } .printer .beam { animation: none; opacity: 0; } .printer .led { animation: none; opacity: 1; } } /* ============================================================ typography === */ article h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--step-4); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--sp-4); } article h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.01em; margin: var(--sp-8) 0 var(--sp-3); padding-top: var(--sp-5); border-top: var(--edge); scroll-margin-top: 5rem; } article h2 .num { font-family: var(--font-pixel); font-size: 0.7rem; color: var(--accent); vertical-align: 0.35em; margin-right: var(--sp-3); } article h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-1); margin: var(--sp-6) 0 var(--sp-2); scroll-margin-top: 5rem; } article h4 { font-family: var(--font-mono); font-weight: 600; font-size: var(--step-0); color: var(--fg-muted); margin: var(--sp-5) 0 var(--sp-2); } article p { margin: 0 0 var(--sp-4); max-width: 74ch; } article .lede { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.55; color: var(--fg-muted); margin-bottom: var(--sp-6); } article ul, article ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; max-width: 74ch; } article li { margin: var(--sp-2) 0; } article li::marker { color: var(--brand); } article strong { font-weight: 600; color: var(--fg); } article hr { border: 0; height: 12px; margin: var(--sp-8) 0; background: radial-gradient(circle at 6px 50%, var(--bg) 3.5px, transparent 4px) 0 0 / 16px 12px repeat-x, var(--border); -webkit-mask: linear-gradient(#000 0 0); } /* liens externes : petite flèche */ article a[href^="http"]::after { content: " ↗"; font-size: 0.85em; color: var(--fg-faint); } /* ================================================================ code ==== */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } :not(pre) > code { background: var(--surface-2); border: var(--edge); border-radius: var(--r-sm); padding: 0.08em 0.38em; color: var(--accent); overflow-wrap: anywhere; } @media (min-width: 720px) { :not(pre) > code { white-space: nowrap; } } kbd { background: var(--surface-3); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0.05em 0.4em; font-size: 0.82em; } .code { position: relative; margin: 0 0 var(--sp-5); border: var(--edge); border-radius: var(--r-md); background: oklch(0.135 0.016 305); overflow: hidden; } .code__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: var(--edge); background: var(--surface-1); font-family: var(--font-pixel); font-size: 0.6rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-faint); } .code__bar .lang { color: var(--fg-muted); } .code__copy { margin-left: auto; appearance: none; background: var(--surface-2); border: var(--edge); border-radius: var(--r-sm); color: var(--fg-muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0; text-transform: none; padding: 3px 8px; cursor: pointer; min-height: 24px; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .code__copy:hover { color: var(--fg); border-color: var(--border-strong); } .code__copy[data-done="1"] { color: var(--ok); border-color: var(--ok); } .code pre { margin: 0; padding: var(--sp-4); overflow-x: auto; font-size: var(--step--1); line-height: 1.6; color: oklch(0.9 0.01 305); /* déroulé façon sortie thermique */ background: linear-gradient(0deg, transparent 0 1.6em, oklch(1 0 0 / 0.015) 1.6em 1.601em) 0 0 / 100% 1.601em; } .code pre .t { color: var(--fg-faint); } /* commentaire */ .code pre .k { color: var(--link); } /* mot-clé / méthode */ .code pre .s { color: var(--accent); } /* chaîne */ .code pre .n { color: oklch(0.8 0.11 155); } /* nombre */ .code pre .p { color: var(--fg-muted); } /* ponctuation */ /* ============================================================== callouts == */ .note { margin: 0 0 var(--sp-5); border: var(--edge); border-left: 3px solid var(--brand); border-radius: var(--r-sm); background: color-mix(in oklab, var(--surface-1), var(--brand-wash) 30%); padding: var(--sp-4); } .note--warn { border-left-color: var(--warn); background: color-mix(in oklab, var(--surface-1), var(--accent-wash) 40%); } .note--danger { border-left-color: var(--danger); } .note__label { font-family: var(--font-pixel); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); display: block; margin-bottom: var(--sp-2); } .note :last-child { margin-bottom: 0; } /* ================================================================ tables == */ .twrap { overflow-x: auto; margin: 0 0 var(--sp-5); border: var(--edge); border-radius: var(--r-md); } table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } caption { text-align: left; color: var(--fg-faint); font-size: var(--step--1); padding: var(--sp-2) var(--sp-3); } th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; } thead th { font-family: var(--font-pixel); font-size: 0.58rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-faint); background: var(--surface-1); position: sticky; top: 0; } tbody tr:nth-child(even) { background: oklch(1 0 0 / 0.018); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td code { white-space: nowrap; } /* ================================================================ badges == */ .tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1; padding: 3px 6px; border-radius: var(--r-sm); border: 1px solid currentColor; white-space: nowrap; } .tag--read { color: var(--fg-faint); } .tag--write { color: var(--accent); } .tag--danger { color: var(--danger); } .tag--world { color: var(--link); } .tag--get { color: var(--ok); } .tag--post { color: var(--link); } .tag--auth { color: var(--fg-faint); } .tag::before { content: ""; width: 5px; height: 5px; background: currentColor; } .tag--read::before { border-radius: 50%; } /* =========================================================== pillar cards = */ .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: 0 0 var(--sp-6); } @media (max-width: 720px) { .pillars { grid-template-columns: 1fr; } } .pillar { border: var(--edge); border-radius: var(--r-md); padding: var(--sp-5); background: var(--surface-1); transition: border-color var(--dur-1) var(--ease); } .pillar:hover { border-color: var(--border-strong); } .pillar h3 { margin-top: 0; display: flex; align-items: center; gap: var(--sp-3); } .pillar__spr { width: 22px; height: 22px; image-rendering: pixelated; flex: none; } .pillar p { color: var(--fg-muted); font-size: var(--step--1); margin-bottom: var(--sp-3); } .pillar a { font-family: var(--font-mono); font-size: var(--step--1); } /* ============================================================ tool list === */ .toolfam { margin: var(--sp-6) 0; } .toolfam__head { display: flex; align-items: baseline; gap: var(--sp-3); border-bottom: 1px solid var(--border-strong); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); } .toolfam__head h3 { margin: 0; } .toolfam__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-faint); } .tool { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); } .tool:last-child { border-bottom: 0; } .tool__name { font-family: var(--font-mono); font-weight: 600; color: var(--fg); font-size: 0.92rem; } .tool__tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .tool__desc { grid-column: 1 / -1; color: var(--fg-muted); font-size: var(--step--1); margin: 0; } .tool__params { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-faint); } .tool__params b { color: var(--fg-muted); font-weight: 500; } .famcount { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-faint); margin: 0 0 var(--sp-4); } /* ============================================================ provider ==== */ .providers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: var(--sp-5) 0; } @media (max-width: 720px) { .providers { grid-template-columns: 1fr; } } .prov { border: var(--edge); border-radius: var(--r-md); background: var(--surface-1); padding: var(--sp-4); } .prov__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } .prov__logo { width: 26px; height: 26px; flex: none; } .prov__name { font-family: var(--font-sans); font-weight: 600; } .prov__auth { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fg-faint); margin-left: auto; } .prov p { font-size: var(--step--1); color: var(--fg-muted); margin: 0; } /* ================================================================ steps === */ .steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--sp-5); } .steps > li { counter-increment: step; position: relative; padding: 0 0 var(--sp-4) var(--sp-8); border-left: 1px solid var(--border); margin-left: 12px; } .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: -13px; top: -2px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: var(--font-pixel); font-size: 0.62rem; color: var(--accent); } /* ================================================================ footer == */ .foot { border-top: var(--edge); background: var(--surface-1); padding: var(--sp-6); font-size: var(--step--1); color: var(--fg-faint); } .foot__inner { max-width: 96rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center; } .foot a { color: var(--fg-muted); } .foot__mono { font-family: var(--font-mono); } /* ============================================================ prev / next = */ .pager { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--edge); } .pager a { font-family: var(--font-mono); font-size: var(--step--1); max-width: 48%; } .pager .k { display: block; font-family: var(--font-pixel); font-size: 0.58rem; color: var(--fg-faint); text-transform: uppercase; margin-bottom: 2px; } .pager .next { text-align: right; margin-left: auto; } /* ============================================================== helpers === */ .cursor::after { content: ""; display: inline-block; width: 0.5ch; height: 0.72em; margin-left: 0.12em; vertical-align: baseline; background: var(--accent); animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } } .lead-list { display: grid; gap: var(--sp-2); } .kv { display: grid; grid-template-columns: 12rem 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--step--1); } .kv dt { font-family: var(--font-mono); color: var(--fg-muted); } .kv dd { margin: 0; } @media (max-width: 620px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: var(--sp-2); } }