:root{--ink:#13294b;--paper:#f4f1e8;--accent:#f26b38;--deep:#1d4e9e;--soft:#e2e6ee;--display:'Beiruti',Arial,sans-serif;--body:'Ysabeau Office',Arial,sans-serif;--mono:'Fira Code',Consolas,monospace}
/* Composition propre à cette identité. */
@media(max-width:760px){body[class*=design-] .hero{grid-template-columns:1fr}}
.design-atelier .eyebrow,.design-atelier .story-category,.design-atelier .topic-number,.design-atelier figcaption,.design-atelier .story-meta,.design-atelier .article-meta{font-family:var(--mono)}
.design-atelier .site-topline{background:var(--ink);color:var(--paper);border:0}
.design-atelier .site-header{border-bottom:0}
.design-atelier .site-header:after{content:'';display:block;height:8px;background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,var(--ink) 12px 24px)}
.design-atelier .brand>span{font-family:var(--display);font-weight:800;font-size:25px}
.design-atelier .hero h1{font-weight:800;line-height:1}
.design-atelier h1,.design-atelier h2,.design-atelier h3,.design-atelier h4,.design-atelier .brand>span{letter-spacing:0;word-spacing:.14em}
.design-atelier .hero-art{border:2px dashed var(--deep);padding:12px;border-radius:6px}
.design-atelier .button{background:var(--ink);border-radius:4px;box-shadow:inset 0 -4px 0 var(--accent)}
.design-atelier .button:hover{background:var(--deep)}
.design-atelier .topics{border:0;gap:12px}
.design-atelier .topics .topic{border:2px solid var(--ink);border-radius:4px;padding:20px 16px;background:var(--paper)}
.design-atelier .topic-number{background:var(--accent);color:var(--ink);opacity:1;padding:3px 6px;font-weight:700}
.design-atelier .section-symbol{color:var(--accent)}
.design-atelier .story h3{font-weight:800}
.design-atelier .story-image{border:2px solid var(--ink);border-radius:4px}
.design-atelier .story-category{display:inline-block;background:var(--ink);color:var(--paper);padding:3px 8px}
.design-atelier .story-meta{border-top-style:dashed}
.design-atelier .notebook{background-color:var(--deep);background-image:linear-gradient(#ffffff1a 1px,transparent 1px),linear-gradient(90deg,#ffffff1a 1px,transparent 1px);background-size:24px 24px;color:var(--paper)}
.design-atelier .notebook-icon{color:var(--accent)}
.design-atelier .round-link{border-color:var(--paper)}
.design-atelier .notebook a:focus-visible{outline-color:var(--accent)}
@media(max-width:760px){.design-atelier .topics .topic{padding:16px 12px}}