/* ============================================================ MivaaPay — Documentation développeur (docs.mivaapay.com) Site statique, aucune dépendance à builder. Deux thèmes : sombre (identité de marque) et clair. Le thème résolu est porté par , posé avant la première peinture par le script inline en tête de de chaque page. Tokens alignés sur predypay_front/src/assets/tokens.css. ============================================================ */ /* ---------- Invariants ---------- */ :root { --mv-red: #E83E52; --mv-red-deep: #C9293D; --mv-anthracite: #1D1D1B; --py-r-s: 8px; --py-r: 12px; --py-r-l: 20px; --py-r-pill: 999px; --py-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --py-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --py-dur: 200ms; --py-ease: cubic-bezier(.4, 0, .2, 1); --nav-w: 268px; --toc-w: 216px; --header-h: 60px; --content-w: 760px; } /* ---------- Thème sombre (défaut) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --py-accent: var(--mv-red); --py-accent-deep: var(--mv-red-deep); --py-accent-text: var(--mv-red); --py-accent-wash: rgba(232, 62, 82, .12); --py-on-accent: #FFFFFF; --py-bg: #0d0d0d; --py-surface: #171717; --py-surface-2: #1e1e1e; --py-surface-3: #262626; --py-line: #2c2c2c; --py-line-2: #3a3a3a; --py-ink-1: #f4f4f4; --py-ink-2: #a7a7a7; --py-ink-3: #6f6f6f; --py-green: #22c48d; --py-green-soft: #123528; --py-red: #D93A2B; --py-red-soft: #3a1614; --py-warn: #E5A93C; --py-warn-soft: #3a300f; --py-blue: #5aa9f7; --py-blue-soft: #10233a; --py-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35); --py-focus-ring: #FFFFFF; --code-bg: #121212; } /* ---------- Thème clair ---------- */ :root[data-theme="light"] { color-scheme: light; --py-accent: #D62B41; --py-accent-deep: #B21D30; --py-accent-text: #B21D30; --py-accent-wash: rgba(214, 43, 65, .10); --py-on-accent: #FFFFFF; --py-bg: #FFFFFF; --py-surface: #FAFAFA; --py-surface-2: #F4F4F4; --py-surface-3: #EFEFEF; --py-line: #E4E4E4; --py-line-2: #D6D6D6; --py-ink-1: #1D1D1B; --py-ink-2: #4F4F4D; --py-ink-3: #6E6E6C; --py-green: #0B6B4C; --py-green-soft: #E2F5EE; --py-red: #B3301F; --py-red-soft: #FBE7E4; --py-warn: #8A5B00; --py-warn-soft: #FBF0DA; --py-blue: #1B5FA8; --py-blue-soft: #E8F1FB; --py-shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 12px 32px rgba(20, 20, 20, .08); --py-focus-ring: var(--mv-anthracite); --code-bg: #1a1a1a; /* les blocs de code restent sombres dans les deux thèmes */ } @media (prefers-reduced-motion: reduce) { :root { --py-dur: 0ms; } * { animation: none !important; scroll-behavior: auto !important; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--py-bg); color: var(--py-ink-1); font-family: var(--py-sans); font-size: 15.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--py-accent-text); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--py-focus-ring); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--py-accent); color: var(--py-on-accent); padding: 10px 16px; border-radius: var(--py-r-s); } .skip-link:focus { left: 8px; } /* ---------- En-tête ---------- */ .hdr { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: color-mix(in srgb, var(--py-bg) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--py-line); } /* Lockup MivaaPay, identique à celui de la landing : le texte suit currentColor, le monogramme garde le rouge de marque. Un seul élément pour les deux thèmes. */ .hdr-brand { display: flex; align-items: center; flex: none; color: var(--py-ink-1); } .hdr-brand:hover { text-decoration: none; } .hdr-brand svg { height: 24px; width: auto; display: block; } .hdr-brand .lt { fill: currentColor; } .hdr-brand .lm { fill: var(--py-accent); } .hdr-tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--py-ink-3); padding-left: 10px; border-left: 1px solid var(--py-line-2); } .hdr-spacer { flex: 1; } .hdr-links { display: flex; align-items: center; gap: 4px; } .hdr-links a { color: var(--py-ink-2); font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: var(--py-r-s); } .hdr-links a:hover { color: var(--py-ink-1); background: var(--py-surface-2); text-decoration: none; } .btn-cta { background: var(--py-accent); color: var(--py-on-accent) !important; font-weight: 600; padding: 7px 14px !important; border-radius: var(--py-r-pill); } .btn-cta:hover { background: var(--py-accent-deep); text-decoration: none !important; } .icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--py-line); border-radius: var(--py-r-s); background: var(--py-surface); color: var(--py-ink-2); cursor: pointer; flex: none; transition: color var(--py-dur) var(--py-ease), border-color var(--py-dur) var(--py-ease); } .icon-btn:hover { color: var(--py-ink-1); border-color: var(--py-line-2); } .icon-btn svg { width: 17px; height: 17px; } :root[data-theme="light"] .icon-moon { display: none; } :root:not([data-theme="light"]) .icon-sun { display: none; } .nav-toggle { display: none; } /* ---------- Recherche ---------- */ .search { position: relative; flex: none; width: 210px; } .search input { width: 100%; height: 34px; padding: 0 10px 0 32px; font: inherit; font-size: 14px; color: var(--py-ink-1); background: var(--py-surface); border: 1px solid var(--py-line); border-radius: var(--py-r-s); } .search input::placeholder { color: var(--py-ink-3); } .search input:focus { border-color: var(--py-line-hover, var(--py-line-2)); outline: none; } .search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--py-ink-3); pointer-events: none; } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 340px; overflow-y: auto; background: var(--py-surface); border: 1px solid var(--py-line); border-radius: var(--py-r); box-shadow: var(--py-shadow); padding: 6px; display: none; } .search-results[data-open] { display: block; } .search-results a { display: block; padding: 7px 10px; border-radius: var(--py-r-s); color: var(--py-ink-1); font-size: 14px; } .search-results a:hover, .search-results a.is-active { background: var(--py-surface-3); text-decoration: none; } .search-results a span { display: block; font-size: 12px; color: var(--py-ink-3); } .search-empty { padding: 10px; font-size: 13px; color: var(--py-ink-3); } /* ---------- Grille ---------- */ .shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); max-width: 1440px; margin: 0 auto; } /* ---------- Navigation latérale ---------- */ .nav { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 28px 12px 60px 20px; border-right: 1px solid var(--py-line); } .nav-group + .nav-group { margin-top: 26px; } .nav-group > p { margin: 0 0 8px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--py-ink-3); } .nav ul { list-style: none; margin: 0; padding: 0; } .nav li a { display: block; padding: 6px 10px; border-radius: var(--py-r-s); color: var(--py-ink-2); font-size: 14.5px; line-height: 1.45; border-left: 2px solid transparent; } .nav li a:hover { color: var(--py-ink-1); background: var(--py-surface-2); text-decoration: none; } .nav li a[aria-current="page"] { color: var(--py-accent-text); background: var(--py-accent-wash); font-weight: 600; } .nav .nav-sub { margin: 2px 0 6px 12px; border-left: 1px solid var(--py-line); } .nav .nav-sub a { font-size: 13.5px; padding: 4px 10px; color: var(--py-ink-3); } /* ---------- Contenu ---------- */ .page { display: grid; grid-template-columns: minmax(0, var(--content-w)) var(--toc-w); gap: 48px; padding: 40px 40px 100px; } .doc { min-width: 0; } .doc .eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--py-accent-text); } .doc h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; } .doc .lead { margin: 0 0 32px; font-size: 17.5px; line-height: 1.65; color: var(--py-ink-2); } .doc h2 { margin: 52px 0 14px; padding-top: 14px; border-top: 1px solid var(--py-line); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; } .doc h3 { margin: 34px 0 10px; font-size: 18px; font-weight: 650; } .doc h4 { margin: 24px 0 8px; font-size: 15px; font-weight: 650; color: var(--py-ink-2); } .doc h2 a.anchor, .doc h3 a.anchor { margin-left: 8px; color: var(--py-ink-3); opacity: 0; font-weight: 400; text-decoration: none; } .doc h2:hover a.anchor, .doc h3:hover a.anchor { opacity: 1; } .doc p { margin: 0 0 16px; } .doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; } .doc li { margin-bottom: 7px; } .doc li > ul, .doc li > ol { margin-top: 7px; } .doc strong { font-weight: 650; color: var(--py-ink-1); } .doc hr { border: 0; border-top: 1px solid var(--py-line); margin: 40px 0; } .doc blockquote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--py-line-2); color: var(--py-ink-2); } /* Code en ligne */ .doc :not(pre) > code { font-family: var(--py-mono); font-size: .87em; padding: .15em .38em; border-radius: 5px; background: var(--py-surface-3); color: var(--py-ink-1); word-break: break-word; } :root[data-theme="dark"] .doc :not(pre) > code { color: #f5b8c0; } :root[data-theme="light"] .doc :not(pre) > code { color: var(--py-accent-deep); } /* ---------- Blocs de code ---------- */ .code { position: relative; margin: 0 0 20px; background: var(--code-bg); border: 1px solid var(--py-line); border-radius: var(--py-r); overflow: hidden; } :root[data-theme="light"] .code { border-color: #2a2a2a; } .code-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid rgba(255, 255, 255, .08); } .code-title { font-family: var(--py-mono); font-size: 12px; color: #8c8c8c; padding: 4px 8px; margin-right: auto; } .code-tab { appearance: none; border: 0; background: transparent; color: #8c8c8c; font: inherit; font-size: 12.5px; font-weight: 550; padding: 4px 10px; border-radius: 6px; cursor: pointer; } .code-tab:hover { color: #e4e4e4; } .code-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .1); } .code-copy { appearance: none; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #9a9a9a; border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; flex: none; } .code-copy:hover { color: #fff; border-color: rgba(255, 255, 255, .3); } .code-copy[data-done] { color: var(--py-green); border-color: var(--py-green); } .code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--py-mono); font-size: 13px; line-height: 1.65; color: #e6e6e6; tab-size: 2; } .code pre[hidden] { display: none; } .code pre code { font: inherit; color: inherit; background: none; padding: 0; } /* Coloration syntaxique minimale, appliquée par docs.js */ .tok-str { color: #a8e08f; } .tok-num { color: #f0a868; } .tok-key { color: #7fc4f0; } .tok-bool { color: #d99ef0; } .tok-com { color: #6a6a6a; font-style: italic; } .tok-fn { color: #f5d67b; } /* ---------- Tableaux ---------- */ .table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--py-line); border-radius: var(--py-r); } .doc table { width: 100%; border-collapse: collapse; font-size: 14px; } .doc th, .doc td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--py-line); } .doc thead th { background: var(--py-surface-2); font-weight: 650; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--py-ink-2); white-space: nowrap; } .doc tbody tr:last-child td { border-bottom: 0; } .doc td code { white-space: nowrap; } .doc td.wrap code { white-space: normal; } .req { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; vertical-align: 1px; } .req-yes { background: var(--py-red-soft); color: var(--py-red); } .req-no { background: var(--py-surface-3); color: var(--py-ink-3); } /* ---------- Encadrés ---------- */ .note { margin: 0 0 22px; padding: 14px 18px; border-radius: var(--py-r); border: 1px solid var(--py-line); border-left: 3px solid var(--py-ink-3); background: var(--py-surface); font-size: 14.5px; } .note > :last-child { margin-bottom: 0; } .note-title { display: block; margin-bottom: 4px; font-weight: 650; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; } .note-info { border-left-color: var(--py-blue); } .note-info .note-title { color: var(--py-blue); } .note-warn { border-left-color: var(--py-warn); } .note-warn .note-title { color: var(--py-warn); } .note-danger { border-left-color: var(--py-red); } .note-danger .note-title { color: var(--py-red); } .note-ok { border-left-color: var(--py-green); } .note-ok .note-title { color: var(--py-green); } /* ---------- Méthodes HTTP ---------- */ .method { display: inline-block; font-family: var(--py-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; vertical-align: 1px; } .m-get { background: var(--py-blue-soft); color: var(--py-blue); } .m-post { background: var(--py-green-soft); color: var(--py-green); } .m-put { background: var(--py-warn-soft); color: var(--py-warn); } .m-delete { background: var(--py-red-soft); color: var(--py-red); } .endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 11px 14px; background: var(--py-surface); border: 1px solid var(--py-line); border-radius: var(--py-r); } .endpoint code { font-family: var(--py-mono); font-size: 14px; background: none !important; padding: 0 !important; color: var(--py-ink-1) !important; word-break: break-all; } .endpoint .path-dim { color: var(--py-ink-3); } /* ---------- Cartes ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 24px; } .card { display: block; padding: 18px; background: var(--py-surface); border: 1px solid var(--py-line); border-radius: var(--py-r); color: inherit; transition: border-color var(--py-dur) var(--py-ease), transform var(--py-dur) var(--py-ease); } .card:hover { text-decoration: none; border-color: var(--py-accent); transform: translateY(-2px); } .card b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 650; } .card span { font-size: 13.5px; color: var(--py-ink-2); line-height: 1.55; } /* ---------- Étapes ---------- */ .steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 24px; } .steps > li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 28px; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--py-accent); color: var(--py-on-accent); font-size: 13px; font-weight: 700; line-height: 1; } .steps > li > h3:first-child { margin-top: 2px; } /* ---------- Pied de page / pagination ---------- */ .pager { display: flex; gap: 14px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--py-line); } .pager a { flex: 1; padding: 14px 18px; border: 1px solid var(--py-line); border-radius: var(--py-r); color: inherit; } .pager a:hover { border-color: var(--py-accent); text-decoration: none; } .pager a small { display: block; font-size: 12px; color: var(--py-ink-3); margin-bottom: 2px; } .pager a b { font-weight: 650; font-size: 15px; } .pager .next { text-align: right; } .doc-foot { margin-top: 40px; font-size: 13px; color: var(--py-ink-3); } /* ---------- Sommaire de page ---------- */ .toc { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; max-height: calc(100vh - var(--header-h) - 80px); overflow-y: auto; font-size: 13.5px; } .toc p { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--py-ink-3); } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--py-line); } .toc li a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--py-ink-3); line-height: 1.45; } .toc li a:hover { color: var(--py-ink-1); text-decoration: none; } .toc li a.is-active { color: var(--py-accent-text); border-left-color: var(--py-accent); } .toc li.lvl-3 a { padding-left: 24px; font-size: 13px; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .page { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } } @media (max-width: 900px) { :root { --header-h: 56px; } .shell { grid-template-columns: minmax(0, 1fr); } .nav-toggle { display: inline-grid; } .hdr-links a:not(.btn-cta) { display: none; } .hdr-tag { display: none; } /* L'en-tête n'a plus la place d'une largeur fixe pour la recherche : elle absorbe l'espace restant. Sans `min-width: 0`, un enfant flex refuse de passer sous sa taille intrinsèque et pousse la page en débordement. */ .hdr { gap: 10px; padding: 0 14px; } .hdr-spacer { display: none; } .search { flex: 1 1 auto; width: auto; min-width: 0; } .search-results { left: auto; right: 0; width: min(320px, calc(100vw - 28px)); } .nav { position: fixed; top: var(--header-h); left: 0; bottom: 0; width: min(310px, 84vw); height: auto; background: var(--py-bg); z-index: 45; transform: translateX(-102%); transition: transform var(--py-dur) var(--py-ease); box-shadow: var(--py-shadow); } .nav[data-open] { transform: none; } .nav-scrim { position: fixed; inset: var(--header-h) 0 0; background: rgba(0, 0, 0, .5); z-index: 44; display: none; } .nav-scrim[data-open] { display: block; } .page { padding: 28px 20px 80px; } .doc h1 { font-size: 29px; } .doc .lead { font-size: 16px; } .pager { flex-direction: column; } } /* Sur les écrans les plus étroits, la recherche prime sur l'appel à l'action : celui-ci reste accessible depuis chaque page, la recherche non. */ @media (max-width: 560px) { .hdr-links { display: none; } } @media print { .hdr, .nav, .toc, .pager, .nav-scrim { display: none; } .page { display: block; padding: 0; } }