/* Wiki layout & design for documentation */ :root{ --wiki-bg:#f7f7f9; --wiki-surface:#ffffff; --wiki-border:#e5e7eb; --wiki-text:#1f2937; --wiki-muted:#6b7280; --wiki-accent:#2563eb; --wiki-accent-strong:#1d4ed8; --wiki-link:#1f6feb; --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 16px rgba(0,0,0,.06); } /* Base */ html,body{height:100%} *{box-sizing:border-box} body{ margin:0; color:var(--wiki-text); background:var(--wiki-bg); font:400 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:var(--wiki-link);text-decoration:none} a:hover{text-decoration:underline} code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace} /* Sidebar (transforme la navbar en barre latérale wiki) */ .navbar{ position:fixed;left:0;top:0;bottom:0;width:280px; background:var(--wiki-surface); border-right:1px solid var(--wiki-border); box-shadow:var(--shadow-sm); overflow:auto; z-index:100; } .navbar .inner{display:flex;flex-direction:column;gap:12px;padding:16px} .brand{ font-weight:700;font-size:18px;letter-spacing:.2px; } .badge{ align-self:flex-start; background:rgba(37,99,235,.1); color:var(--wiki-accent-strong); border:1px solid rgba(37,99,235,.25); padding:2px 8px;border-radius:999px; font-size:12px;font-weight:600; } .search{margin-top:4px} .search input[type="search"]{ width:100%;padding:10px 12px;border:1px solid var(--wiki-border); border-radius:8px;background:#fff;color:var(--wiki-text); outline:none;box-shadow:none; } .search input[type="search"]::placeholder{color:var(--wiki-muted)} .search input[type="search"]:focus{border-color:var(--wiki-accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .navlinks{ display:flex;flex-direction:column;gap:4px;margin-top:4px } .navlinks a{ display:block;padding:8px 10px;border-radius:8px; color:var(--wiki-text);text-decoration:none; border:1px solid transparent; } .navlinks a:hover{ background:#f3f4f6;border-color:#e5e7eb;text-decoration:none } /* Neutraliser l'ancien surlignage inline et définir l'état actif */ .navlinks a[style]{background:unset !important} .navlinks a[style*="#141727"]{ background:var(--wiki-accent);color:#fff !important; border-color:var(--wiki-accent); font-weight:600; } /* Mise en page du contenu */ body{margin-left:280px} .container{max-width:1040px;margin:0 auto;padding:0 24px} .hero{ background:transparent;margin:0;border-bottom:1px solid var(--wiki-border) } .hero .container{padding:28px 24px} .hero h1{margin:0 0 4px 0;font-size:28px;line-height:1.2} .hero p{margin:6px 0 0 0;color:var(--wiki-muted)} /* Cartes en style wiki (simples blocs) */ .grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px } .card{ background:var(--wiki-surface); border:1px solid var(--wiki-border); border-radius:10px; padding:14px 14px; box-shadow:var(--shadow-sm); } .card h3{margin:0 0 6px 0;font-size:16px} .card p{margin:0;color:#374151} /* Tables et code */ .table-wrap{overflow:auto;border:1px solid var(--wiki-border);border-radius:8px;background:#fff} table{border-collapse:collapse;width:100%} th,td{padding:10px 12px;border-bottom:1px solid var(--wiki-border);text-align:left} th{background:#f8fafc;font-weight:700} pre{background:#0b1020;color:#e7e7e7;padding:14px;border-radius:10px;overflow:auto} code{background:#f3f4f6;border:1px solid #e5e7eb;color:#111827;padding:2px 6px;border-radius:6px} /* Footer */ .footer.small{ color:var(--wiki-muted); border-top:1px solid var(--wiki-border); padding:16px 24px; margin-top:24px; background:linear-gradient(#fff,#fff) } /* Responsive */ @media (max-width: 1200px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width: 1024px){ body{margin-left:0} .navbar{ position:sticky;top:0;width:100%;height:auto;max-height:unset; border-right:none;border-bottom:1px solid var(--wiki-border) } .navbar .inner{gap:10px} .navlinks{flex-direction:row;flex-wrap:wrap;gap:6px} .navlinks a{padding:6px 10px} .container{padding:0 16px} .hero .container{padding:16px} } @media (max-width: 640px){ .grid{grid-template-columns:1fr} .search input[type="search"]{padding:8px 10px} }