:root{--ink:#0f2333;--paper:#f7f9fb;--accent:#4fe3b0;--deep:#0b6580;--soft:#e6eef3;--display:'Fira Sans',Arial,sans-serif;--body:'Fira Sans',Arial,sans-serif;--mono:'Fira Code',Consolas,monospace}
/* Composition propre à cette identité. */
@media(max-width:760px){body[class*=design-] .hero{grid-template-columns:1fr}}
body.design-grid{background-image:linear-gradient(color-mix(in srgb,var(--deep) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--deep) 8%,transparent) 1px,transparent 1px);background-size:32px 32px}
.design-grid .eyebrow,.design-grid .story-category,.design-grid .topic-number,.design-grid .site-topline,.design-grid .story-meta,.design-grid figcaption,.design-grid .article-meta{font-family:var(--mono)}
.design-grid .site-topline{background:var(--ink);color:var(--paper);border:0}
.design-grid .site-header{background:var(--paper)}
.design-grid .brand>span{font-weight:800;letter-spacing:-.04em}
.design-grid .hero h1{font-weight:800;letter-spacing:-.045em}
.design-grid .hero-art{background:var(--paper);border:1px solid var(--ink);padding:14px;outline:1px dashed color-mix(in srgb,var(--deep) 60%,transparent);outline-offset:8px}
.design-grid .hero-art figcaption{margin-top:12px}
.design-grid .button{background:var(--accent);color:var(--ink);border-radius:4px}
.design-grid .button:hover{background:var(--ink);color:var(--paper)}
.design-grid .topics{border:1px solid var(--ink);background:var(--paper)}
.design-grid .topics .topic{padding:22px 20px}
.design-grid .topic-number{color:var(--deep);opacity:1}
.design-grid .story{background:var(--paper);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding:12px}
.design-grid .story-content{padding:18px 6px 6px}
.design-grid .story h3{font-weight:700;letter-spacing:-.03em}
.design-grid .notebook{background:var(--ink);color:var(--paper)}
.design-grid .notebook-icon{color:var(--accent)}
.design-grid .round-link{border-color:var(--accent);color:var(--accent)}
.design-grid .notebook a:focus-visible{outline-color:var(--accent)}
.design-grid .page-numbers:not(.current),.design-grid .static-home,.design-grid .prose,.design-grid .empty{background-color:var(--paper)}
.design-grid .empty{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
@media(max-width:760px){.design-grid .topics .topic{padding:18px 12px}.design-grid .hero-art{outline-offset:5px;padding:10px}}