/* ============================================================ XeniAudio — docs.css Pages de documentation (/docs//.html) Feuille SÉPARÉE de style.css à dessein : style.css est chargée par les six pages produit et par le hub, et une régression y coûterait tout le site. Ici on n'ajoute que ce qui n'existe nulle part ailleurs ; la nav, le footer et les variables de couleur viennent de style.css, qui est chargée avant. L'accent du produit arrive par --doc-accent, posé en style inline sur par le gabarit. ============================================================ */ .doc-body { --doc-accent: var(--cyan); } /* ── EN-TÊTE ───────────────────────────────────────────────── */ .doc-head { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); padding: 7rem 2.5rem 2.5rem; } .doc-head-inner { max-width: 1180px; margin: 0 auto; } .doc-crumb { font-size: 0.85rem; color: var(--muted); display: flex; gap: 0.5rem; margin-bottom: 0.9rem; } .doc-crumb a { color: var(--muted); } .doc-crumb a:hover { color: var(--doc-accent); text-decoration: none; } .doc-head h1 { font-size: 2.3rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--doc-accent); } .doc-head h1 .dim { color: var(--muted); font-weight: 400; } .doc-meta { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.9rem; } .doc-version { color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.8rem; background: var(--surface2); } .doc-pdf, .doc-back { border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.8rem; color: var(--text); } .doc-pdf:hover, .doc-back:hover { border-color: var(--doc-accent); color: var(--doc-accent); text-decoration: none; } /* ── COLONNES ──────────────────────────────────────────────── */ .doc-layout { max-width: 1180px; margin: 0 auto; padding: 2.5rem; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3rem; align-items: start; } /* ── SOMMAIRE ──────────────────────────────────────────────── */ .doc-toc { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; font-size: 0.88rem; padding-right: 0.5rem; } .doc-toc-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.8rem; } .doc-toc ul { list-style: none; margin: 0; padding: 0; } .doc-toc ul ul { margin-left: 0.85rem; } .doc-toc li { margin: 0.15rem 0; } .doc-toc a { display: block; color: var(--muted); padding: 0.22rem 0 0.22rem 0.7rem; border-left: 2px solid var(--border); line-height: 1.35; } .doc-toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--muted); } .doc-toc a.here { color: var(--doc-accent); border-left-color: var(--doc-accent); } /* ── CORPS DU MANUEL ───────────────────────────────────────── */ .doc-content { min-width: 0; font-size: 1.02rem; line-height: 1.75; } .doc-content h2 { font-size: 1.6rem; margin: 3rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); color: var(--text); scroll-margin-top: 80px; } .doc-content h2:first-child { margin-top: 0; } .doc-content h3 { font-size: 1.18rem; margin: 2rem 0 0.7rem; color: var(--doc-accent); scroll-margin-top: 80px; } .doc-content h4 { font-size: 1rem; margin: 1.4rem 0 0.5rem; color: var(--text); scroll-margin-top: 80px; } .doc-content p { margin: 0.9rem 0; } .doc-content ul, .doc-content ol { margin: 0.9rem 0 0.9rem 1.4rem; } .doc-content li { margin: 0.35rem 0; } .doc-content strong { color: #fff; } .doc-content a { color: var(--doc-accent); } .doc-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } .doc-content blockquote { border-left: 3px solid var(--doc-accent); background: var(--surface); margin: 1.4rem 0; padding: 0.8rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; color: #cfcfcf; } .doc-content blockquote p:first-child { margin-top: 0; } .doc-content blockquote p:last-child { margin-bottom: 0; } .doc-content code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 0.08em 0.35em; color: #f0d9a8; } .doc-content pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; overflow-x: auto; /* le bloc défile, jamais la page */ margin: 1.2rem 0; } .doc-content pre code { background: none; border: none; padding: 0; color: var(--text); font-size: 0.85rem; line-height: 1.6; } /* Les tableaux des manuels sont larges (paramètre / plage / effet) : ils défilent DANS leur boîte. */ .doc-content .doc-table-wrap { overflow-x: auto; margin: 1.4rem 0; } .doc-content table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 460px; } .doc-content th, .doc-content td { border: 1px solid var(--border); padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; } .doc-content th { background: var(--surface2); color: var(--text); font-weight: 600; } .doc-content tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); } .doc-content figure { margin: 1.8rem 0; } .doc-content img { max-width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius); } .doc-content figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; text-align: center; } .doc-foot-note { color: var(--muted); font-size: 0.92rem; } /* ── HUB /docs// ─────────────────────────────────────── */ .doc-hub { max-width: 1180px; margin: 0 auto; padding: 2.5rem; } .doc-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; margin-top: 2rem; } .doc-hub-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; transition: border-color 0.15s ease, transform 0.15s ease; } .doc-hub-card:hover { border-color: var(--card-accent, var(--cyan)); transform: translateY(-2px); text-decoration: none; } .doc-hub-card h2 { font-size: 1.2rem; color: var(--card-accent, var(--cyan)); margin-bottom: 0.4rem; } .doc-hub-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; } .doc-hub-card .doc-hub-ver { display: inline-block; margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.65rem; } .doc-hub-card.mc { --card-accent: var(--cyan); } .doc-hub-card.sm { --card-accent: var(--orange); } .doc-hub-card.pt { --card-accent: var(--phantom); } .doc-hub-card.sw { --card-accent: var(--swarm); } .doc-hub-card.bb { --card-accent: var(--busbar); } .doc-hub-card.gt { --card-accent: var(--groove); } /* ── PETITS ÉCRANS ─────────────────────────────────────────── */ @media (max-width: 900px) { .doc-head { padding: 6rem 1.25rem 2rem; } .doc-head h1 { font-size: 1.8rem; } .doc-layout { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.25rem 2.5rem; } .doc-toc { position: static; max-height: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--surface); } .doc-hub { padding: 1.5rem 1.25rem 2.5rem; } } /* ── IMPRESSION ────────────────────────────────────────────── */ @media print { nav, footer, .doc-toc, .doc-meta, .doc-crumb { display: none; } .doc-body { background: #fff; color: #111; } .doc-layout { display: block; padding: 0; } .doc-content a { color: #111; } } /* ── SOMMAIRE REPLIABLE ──────────────────────────────────────── Ouvert sur grand écran, replié sur mobile (le gabarit retire l'attribut `open` en JS) : là-bas le sommaire précède le manuel, et ses trente entrées repousseraient le texte hors de l'écran. */ .doc-toc-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.8rem; } .doc-toc-box > summary::-webkit-details-marker { display: none; } .doc-toc-box > summary::before { content: "▾"; font-size: 0.7rem; color: var(--muted); transition: transform 0.15s ease; } .doc-toc-box:not([open]) > summary::before { transform: rotate(-90deg); } .doc-toc-box:not([open]) > summary { margin-bottom: 0; } @media (min-width: 901px) { /* Sur grand écran la flèche n'apporte rien : le sommaire est toujours là. */ .doc-toc-box > summary { cursor: default; } .doc-toc-box > summary::before { display: none; } } /* ── SÉLECTEUR DE LANGUE ─────────────────────────────────────── Toujours visible, jamais automatique : rediriger d'office d'après Accept-Language enferme le lecteur dans une langue qu'il n'a pas choisie, et brouille l'indexation. */ .doc-lang { border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; } .doc-lang:hover { border-color: var(--doc-accent); color: var(--doc-accent); text-decoration: none; } .doc-lang::before { content: "🌐"; font-size: 0.85em; } /* ── BANDEAU DE TRADUCTION PÉRIMÉE ───────────────────────────── Posé automatiquement quand le sha du manuel anglais ne correspond plus à celui dont la traduction est issue. Une doc traduite qui a vieilli en silence est pire que pas de doc : elle décrit une interface qui n'existe plus, et le lecteur n'a aucun moyen de le savoir. */ .doc-stale { max-width: 1180px; margin: 1.5rem auto -0.5rem; padding: 0.9rem 1.2rem; border: 1px solid rgba(249, 115, 22, 0.45); background: var(--orange-dim); border-radius: var(--radius); color: #f5c9a0; font-size: 0.92rem; line-height: 1.55; } .doc-stale a { color: var(--orange); font-weight: 600; } @media (max-width: 900px) { .doc-stale { margin: 1rem 1.25rem -0.5rem; } }