/* ========================================================= Documentation Xav-74 — thème sombre Palette dérivée du logo : dégradé #26384f → #3a5a7a ========================================================= */ :root { /* Marque */ --brand-900: #1a2635; --brand-800: #26384f; --brand-700: #2f4763; --brand-600: #3a5a7a; --brand-500: #4a739a; --brand-400: #6da5da; --brand-300: #93c1ec; --brand-grad: linear-gradient(135deg, #26384f 0%, #3a5a7a 100%); --brand-grad-soft: linear-gradient(135deg, rgba(38, 56, 79, .95) 0%, rgba(58, 90, 122, .95) 100%); /* Fonds */ --bg: #0c1118; --bg-alt: #0f1621; --surface: #131c27; --surface-2: #182432; --surface-3: #1e2c3d; --border: #24344a; --border-soft: #1c2938; /* Texte */ --text: #dfe8f3; --text-soft: #b3c2d4; --text-muted: #8496ab; --link: #6da5da; --link-hover: #93c1ec; /* Sémantique */ --ok: #56b892; --warn: #d9a441; --danger: #e0736b; /* Mesures */ --sidebar-w: 292px; --topbar-h: 60px; --radius: 12px; --radius-sm: 8px; --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --heading: #ffffff; --ok-soft: #a8e6c8; --warn-soft: #f0d3a0; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28); } /* ========================================================= Thème clair — activé par data-theme="light" sur ========================================================= */ :root[data-theme="light"] { --brand-400: #3a7bc0; --brand-300: #2f6cb0; --bg: #f5f8fc; --bg-alt: #eaf0f7; --surface: #ffffff; --surface-2: #eef3f9; --surface-3: #e2eaf4; --border: #d3dded; --border-soft: #e4ebf4; --text: #16202c; --text-soft: #3a4a5e; --text-muted: #5d6e83; --heading: #101b28; --ok-soft: #17805a; --warn-soft: #9b6310; --link: #2668b0; --link-hover: #174a86; --ok: #1a7f5a; --warn: #a86a10; --danger: #bd382c; --shadow: 0 1px 2px rgba(22, 40, 66, .06), 0 8px 24px rgba(22, 40, 66, .08); } :root[data-theme="light"] body::before { background: radial-gradient(900px 320px at 18% -60px, rgba(58, 90, 122, .10), transparent 70%); } :root[data-theme="light"] .topbar { background: rgba(245, 248, 252, .85); } :root[data-theme="light"] ::selection { background: rgba(47, 108, 176, .18); } /* le bandeau d'accueil conserve le dégradé de marque */ :root[data-theme="light"] .hero { border-color: transparent; } :root[data-theme="light"] .hero h1 { color: #fff; } :root[data-theme="light"] .subnav a.is-active { color: #fff; } /* coloration syntaxique, variante claire */ :root[data-theme="light"] .highlight .c, :root[data-theme="light"] .highlight .c1, :root[data-theme="light"] .highlight .cm, :root[data-theme="light"] .highlight .cs { color: #6b7d92; } :root[data-theme="light"] .highlight .k, :root[data-theme="light"] .highlight .kd, :root[data-theme="light"] .highlight .kn, :root[data-theme="light"] .highlight .kp, :root[data-theme="light"] .highlight .kr, :root[data-theme="light"] .highlight .kt { color: #8a3fbf; } :root[data-theme="light"] .highlight .s, :root[data-theme="light"] .highlight .s1, :root[data-theme="light"] .highlight .s2 { color: #1a7f5a; } :root[data-theme="light"] .highlight .m, :root[data-theme="light"] .highlight .mi, :root[data-theme="light"] .highlight .mf { color: #b3600d; } :root[data-theme="light"] .highlight .nt, :root[data-theme="light"] .highlight .nc, :root[data-theme="light"] .highlight .nf { color: #2668b0; } :root[data-theme="light"] .prose pre code { color: #24303f; } :root[data-theme="light"] .prose code { color: #234a73; } /* encarts et badges : teintes un peu plus soutenues sur fond clair */ :root[data-theme="light"] .callout-warn { background: rgba(168, 106, 16, .08) !important; } :root[data-theme="light"] .callout-danger { background: rgba(189, 56, 44, .07) !important; } :root[data-theme="light"] .ver-tag { background: rgba(38, 104, 176, .09); color: #24598f; border-color: rgba(36, 89, 143, .35); } :root[data-theme="light"] .ver-tag--beta { background: rgba(168, 106, 16, .1); color: #85560c; border-color: rgba(133, 86, 12, .35); } :root[data-theme="light"] .ver-tag--ajour { background: rgba(26, 127, 90, .1); color: #126b4a; border-color: rgba(18, 107, 74, .35); } :root[data-theme="light"] .prose img { background: #fff; } :root[data-theme="light"] .is-changelog .prose h1.is-beta { border-color: rgba(168, 106, 16, .35); background: rgba(168, 106, 16, .06); } :root[data-theme="light"] .is-changelog .prose h1.is-ajour { border-color: rgba(26, 127, 90, .35); background: rgba(26, 127, 90, .06); } :root[data-theme="light"] .is-changelog .prose h1.is-stable { border-color: rgba(38, 104, 176, .3); background: rgba(38, 104, 176, .06); } :root[data-theme="light"] .results mark { background: rgba(38, 104, 176, .2); color: var(--heading); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Halo discret en haut de page */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 420px; background: radial-gradient(900px 320px at 18% -60px, rgba(58, 90, 122, .28), transparent 70%); pointer-events: none; z-index: -1; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } img { max-width: 100%; height: auto; } ::selection { background: rgba(109, 165, 218, .3); } /* Barre de défilement */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--brand-500); background-clip: content-box; } /* ========================================================= Barre supérieure ========================================================= */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: rgba(12, 17, 24, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); } .topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; color: var(--text); white-space: nowrap; } .topbar__brand:hover { color: var(--text); text-decoration: none; } .topbar__brand img { width: 30px; height: 30px; border-radius: 7px; } .topbar__brand .brandmark { width: 30px; height: 30px; flex: none; color: var(--heading); } .themebtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); cursor: pointer; } .themebtn:hover { border-color: var(--brand-500); color: var(--text); } .themebtn .ico-soleil { display: block; } .themebtn .ico-lune { display: none; } :root[data-theme="light"] .themebtn .ico-soleil { display: none; } :root[data-theme="light"] .themebtn .ico-lune { display: block; } .topbar__brand span small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; } .topbar__brand span b { font-size: 15px; font-weight: 650; } .topbar__spacer { flex: 1; } .topbar__nav { display: flex; align-items: center; gap: 4px; } .topbar__nav a { padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 14px; font-weight: 500; } .topbar__nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .searchbtn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; min-width: 210px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; } .searchbtn:hover { border-color: var(--brand-500); background: var(--surface-2); } .searchbtn kbd { margin-left: auto; font-family: var(--sans); font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-alt); color: var(--text-muted); } .iconbtn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; } .iconbtn:hover { background: var(--surface-2); } /* Sélecteur de langue */ .langmenu { position: relative; flex: none; } .langmenu > summary { list-style: none; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; } .langmenu > summary::-webkit-details-marker { display: none; } .langmenu > summary:hover, .langmenu[open] > summary { border-color: var(--brand-500); color: var(--text); } .langmenu ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 176px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 60; } .langmenu li a { display: block; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 14px; } .langmenu li a:hover { background: var(--surface-2); color: var(--heading); text-decoration: none; } .langmenu li a.is-current { color: var(--brand-300); font-weight: 600; background: var(--surface-2); } .badge--fr { color: var(--brand-300); border-color: var(--brand-500); } /* ========================================================= Ossature ========================================================= */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 40px; max-width: 1500px; margin: 0 auto; padding: 0 28px; } .sidebar { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 26px 4px 60px 0; } .content { min-width: 0; padding: 34px 0 90px; max-width: 900px; } /* ========================================================= Sidebar ========================================================= */ .side-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px 8px; } .side-block + .side-block { margin-top: 26px; } .plugin-list { list-style: none; margin: 0; padding: 0; } .plugin-list li { margin-bottom: 2px; } .plugin-list a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 14.5px; font-weight: 500; border: 1px solid transparent; } .plugin-list a:hover { background: var(--surface); color: var(--heading); text-decoration: none; } .plugin-list a img { width: 22px; height: 22px; border-radius: 5px; flex: none; object-fit: cover; object-position: top center; /* rogne la bande vide imposée par Jeedom */ } .plugin-list a.is-active { background: var(--surface-2); border-color: var(--border); color: var(--heading); } .subnav { display: flex; gap: 6px; margin: 10px 0 0 0; padding: 0 8px; } .subnav a { flex: 1; text-align: center; padding: 6px 10px; font-size: 13px; font-weight: 600; border-radius: 999px; border: 1px solid var(--border); color: var(--text-soft); background: var(--surface); } .subnav a:hover { text-decoration: none; color: var(--text); border-color: var(--brand-500); } .subnav a.is-active { background: var(--brand-grad); border-color: transparent; color: #fff; } /* Sommaire */ .toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-soft); } .toc a { display: block; padding: 5px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); font-size: 14px; line-height: 1.45; } .toc a:hover { color: var(--text); text-decoration: none; } .toc a.lvl-2 { padding-left: 26px; font-size: 13.5px; } .toc a.is-active { color: var(--brand-300); border-left-color: var(--brand-400); font-weight: 600; } /* ========================================================= Contenu / typographie ========================================================= */ .page-head { margin-bottom: 30px; } .crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .crumbs a { color: var(--text-muted); } .crumbs a:hover { color: var(--link-hover); } .crumbs span { margin: 0 7px; opacity: .5; } .page-head h1.doc-title { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--heading); } .page-head .lede { margin: 8px 0 0; color: var(--text-muted); font-size: 15px; } .prose h1, .prose h2, .prose h3, .prose h4 { color: var(--heading); font-weight: 650; letter-spacing: -.015em; scroll-margin-top: calc(var(--topbar-h) + 20px); position: relative; } .prose h1 { font-size: 26px; margin: 52px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .prose h2 { font-size: 21px; margin: 36px 0 12px; } .prose h3 { font-size: 17.5px; margin: 28px 0 10px; } .prose h4 { font-size: 16px; margin: 22px 0 8px; color: var(--text-soft); } .prose > h1:first-child { margin-top: 0; } .prose .hnum { color: var(--brand-400); font-variant-numeric: tabular-nums; margin-right: 8px; font-weight: 600; } .anchor { position: absolute; left: -22px; width: 22px; text-align: center; color: var(--brand-500); opacity: 0; font-weight: 400; transition: opacity .12s; } .prose h1:hover .anchor, .prose h2:hover .anchor, .prose h3:hover .anchor, .prose h4:hover .anchor { opacity: 1; } .anchor:hover { text-decoration: none; color: var(--brand-300); } .prose p { margin: 0 0 16px; color: var(--text-soft); } .prose strong { color: var(--text); font-weight: 650; } .prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; color: var(--text-soft); } .prose li { margin: 5px 0; } .prose li::marker { color: var(--brand-500); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } .prose img { display: block; margin: 22px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); cursor: zoom-in; } .prose p > img:only-child { margin-inline: auto; } .prose img.inline-img, .prose .pluginLogo { display: inline-block; border: 0; box-shadow: none; background: none; margin: 0; cursor: auto; } /* Code */ .prose code { font-family: var(--mono); font-size: .875em; padding: .15em .4em; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border-soft); color: #cfe1f5; } .prose pre { position: relative; margin: 0 0 20px; padding: 16px 18px; overflow-x: auto; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; line-height: 1.6; } .prose pre code { background: none; border: 0; padding: 0; font-size: 13.5px; color: #d6e3f2; } .highlight { margin: 0 0 20px; border-radius: var(--radius); } .highlight pre { margin: 0; } .copybtn { position: absolute; top: 8px; right: 8px; padding: 4px 9px; font-size: 11.5px; font-family: var(--sans); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s; } .prose pre:hover .copybtn { opacity: 1; } .copybtn:hover { color: var(--text); border-color: var(--brand-500); } /* Coloration syntaxique (rouge) */ .highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: #6f8296; font-style: italic; } .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: #c191e8; } .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx { color: #92d3a2; } .highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .il { color: #e0a86b; } .highlight .nt, .highlight .nc, .highlight .nf { color: #6da5da; } .highlight .na, .highlight .nv { color: #7fd0d0; } .highlight .o, .highlight .ow, .highlight .p { color: #a9bdd2; } .highlight .err { color: var(--danger); } /* Tableaux */ .table-wrap { margin: 0 0 22px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .prose thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--heading); font-weight: 650; text-align: left; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .prose thead th:first-child, .prose tbody td:first-child { min-width: 11rem; } .prose tbody td:first-child { color: var(--text); } .prose tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-soft); vertical-align: top; } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody tr:hover td { background: rgba(58, 90, 122, .09); } .prose td img { margin: 0; } /* Encarts (blockquote) */ .prose blockquote { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--brand-500); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-soft); } .prose blockquote > :last-child { margin-bottom: 0; } .prose blockquote p:first-child strong:only-child { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-300); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .callout-tip { border-left-color: var(--ok) !important; } .callout-tip p:first-child strong:only-child { color: var(--ok) !important; } .callout-warn { border-left-color: var(--warn) !important; background: rgba(217, 164, 65, .07) !important; } .callout-warn p:first-child strong:only-child { color: var(--warn) !important; } .callout-danger { border-left-color: var(--danger) !important; background: rgba(224, 115, 107, .07) !important; } .callout-danger p:first-child strong:only-child { color: var(--danger) !important; } /* ========================================================= Changelog ========================================================= */ .is-changelog .prose h1 { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-family: var(--mono); letter-spacing: 0; padding: 6px 14px; margin: 46px 0 16px; border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--brand-300); } .is-changelog .prose h1::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-400); box-shadow: 0 0 0 3px rgba(109, 165, 218, .18); } .is-changelog .prose > h1:first-of-type { margin-top: 0; } .is-changelog .prose h1.is-stable { border-color: rgba(109, 165, 218, .45); color: var(--brand-300); } .is-changelog .prose h1.is-stable::before { background: var(--brand-400); box-shadow: 0 0 0 3px rgba(109, 165, 218, .2); } .is-changelog .prose h1.is-beta { border-color: rgba(217, 164, 65, .45); color: var(--warn-soft); } .is-changelog .prose h1.is-beta::before { background: var(--warn); box-shadow: 0 0 0 3px rgba(217, 164, 65, .2); } .is-changelog .prose h1.is-ajour { border-color: rgba(86, 184, 146, .45); color: var(--ok-soft); } .is-changelog .prose h1.is-ajour::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(86, 184, 146, .2); } .is-changelog .prose h1.is-latest::before, .is-changelog .prose h1.is-autre::before { background: var(--brand-400); box-shadow: 0 0 0 3px rgba(109, 165, 218, .18); } .ver-tag { display: inline-block; margin-left: 10px; vertical-align: 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; color: var(--brand-400); border: 1px solid rgba(109, 165, 218, .4); background: rgba(109, 165, 218, .1); } .ver-tag--beta { color: var(--warn); border-color: rgba(217, 164, 65, .4); background: rgba(217, 164, 65, .1); } .ver-tag--ajour { color: var(--ok); border-color: rgba(86, 184, 146, .4); background: rgba(86, 184, 146, .1); } /* ========================================================= Accueil ========================================================= */ .home { max-width: 1180px; margin: 0 auto; padding: 0 28px 90px; } .hero { margin: 44px 0 20px; padding: 46px 44px; border-radius: 20px; border: 1px solid var(--border); background: var(--brand-grad-soft), var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(147, 193, 236, .22), transparent 65%); } .hero h1 { margin: 0 0 12px; font-size: 38px; line-height: 1.15; letter-spacing: -.025em; color: #fff; font-weight: 700; max-width: 27ch; text-wrap: balance; } .hero p { margin: 0; max-width: 62ch; color: #d3e2f2; font-size: 16.5px; } .hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); } .btn:hover { text-decoration: none; background: var(--surface-3); color: var(--heading); border-color: var(--brand-500); } .btn--primary { background: #fff; color: #14202e; /*border-color: #fff;*/ } .btn--primary:hover { background: #e7f0fa; color: #14202e; border-color: #e7f0fa; } /* Dans le bandeau, l'action principale est un plein sombre et les autres des contours */ .hero .btn { transition: background .2s ease, border-color .2s ease, color .2s ease; background: transparent; border-color: rgba(255, 255, 255, .3); color: #e8f0f9; } .hero .btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); color: #fff; } .hero .btn--primary { background: #fff; border-color: #fff; color: #14202e; } .hero .btn--primary:hover { background: #e7f0fa; border-color: #e7f0fa; color: #14202e; } .section-head { margin: 54px 0 18px; display: flex; align-items: baseline; gap: 12px; } .section-head h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--heading); } .section-head .count { font-size: 12px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .card:hover { transform: translateY(-3px); border-color: var(--brand-500); box-shadow: var(--shadow); } .card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .card__head img { width: 46px; height: 46px; border-radius: 10px; flex: none; object-fit: cover; object-position: top center; /* rogne la bande vide imposée par Jeedom */ } .card__head h3 { margin: 0; font-size: 17.5px; font-weight: 650; color: var(--heading); letter-spacing: -.01em; } .card__head .tagline { font-size: 12.5px; color: var(--text-muted); } .card__desc { margin: 0 0 16px; font-size: 14.5px; color: var(--text-soft); flex: 1; } .card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .badge { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); } .card__links { display: flex; flex-wrap: wrap; gap: 8px; } .card__links a { font-size: 13.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-soft); background: var(--bg-alt); } .card__links a:hover { text-decoration: none; color: var(--heading); border-color: var(--brand-500); background: var(--surface-2); } .card__links a.primary { background: var(--brand-grad); border-color: transparent; color: #fff; } .empty-note { padding: 26px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 14.5px; text-align: center; } /* ========================================================= Pied de page ========================================================= */ .footer { border-top: 1px solid var(--border-soft); background: var(--bg-alt); padding: 28px; } .footer__in { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--text-muted); } .footer__in nav { display: flex; flex-wrap: wrap; gap: 16px; } /* ========================================================= Recherche ========================================================= */ .overlay { position: fixed; inset: 0; z-index: 80; display: none; padding: 12vh 20px 20px; background: rgba(6, 10, 15, .7); backdrop-filter: blur(4px); } .overlay.is-open { display: block; } .searchbox { max-width: 660px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); overflow: hidden; } .searchbox input { width: 100%; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; } .searchbox input::placeholder { color: var(--text-muted); } .results { max-height: 56vh; overflow-y: auto; margin: 0; padding: 8px; list-style: none; } .results li a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); } .results li a:hover, .results li a.is-cursor { background: var(--surface-2); text-decoration: none; } .results .r-title { font-size: 14.5px; font-weight: 600; } .results .r-path { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; } .results .r-snip { font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .results mark { background: rgba(109, 165, 218, .28); color: #fff; border-radius: 3px; padding: 0 2px; } .results .hint { padding: 22px; text-align: center; color: var(--text-muted); font-size: 14px; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 30px; background: rgba(6, 10, 15, .9); cursor: zoom-out; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--radius); border: 1px solid var(--border); } /* Bouton haut de page */ .totop { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .totop.is-visible { opacity: 1; pointer-events: auto; } .totop:hover { color: var(--heading); border-color: var(--brand-500); transform: translateY(-2px); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1180px) { .topbar__nav a.opt { display: none; } .searchbtn { min-width: 0; } .searchbtn span, .searchbtn kbd { display: none; } .searchbtn { justify-content: center; padding: 0; width: 38px; height: 38px; border-radius: var(--radius-sm); } .langmenu > summary span { display: none; } .langmenu > summary { padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: var(--radius-sm); } .themebtn { width: 38px; height: 38px; border-radius: var(--radius-sm); } } @media (max-width: 980px) { .shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 20px; } .iconbtn { display: inline-flex; } .sidebar { position: fixed; top: var(--topbar-h); left: 0; width: 320px; max-width: 88vw; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); padding: 22px 18px 60px; background: var(--bg-alt); border-right: 1px solid var(--border); transform: translateX(-102%); transition: transform .22s ease; z-index: 45; } .sidebar.is-open { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .45); } .scrim { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(6, 10, 15, .6); z-index: 44; display: none; } .scrim.is-open { display: block; } .content { padding-top: 26px; } .hero { padding: 34px 26px; margin-top: 30px; } .hero h1 { font-size: 30px; } .home { padding-inline: 20px; } .cards { grid-template-columns: 1fr; } } @media (max-width: 560px) { .topbar { padding: 0 14px; gap: 10px; } .topbar__brand span small { display: none; } .topbar__nav { display: none; } .page-head h1.doc-title { font-size: 27px; } .prose h1 { font-size: 22px; } .anchor { display: none; } } /* Impression */ @media print { .topbar, .sidebar, .footer, .totop, .scrim, .overlay, .copybtn, .anchor { display: none !important; } body { background: #fff; color: #111; } body::before { display: none; } .shell { display: block; padding: 0; } .content { max-width: none; padding: 0; } .prose h1, .prose h2, .prose h3, .page-head h1.doc-title { color: #111; } .prose p, .prose li, .prose td { color: #222; } .prose img { box-shadow: none; } }