:root{--ink:#221a3d;--paper:#fffbea;--accent:#ffd23f;--deep:#6237c8;--soft:#ece4ff;--display:'Roboto Slab',Georgia,serif;--body:'Manrope',Arial,sans-serif;--mono:'Manrope',Arial,sans-serif}
/* Composition propre à cette identité. */
@media(max-width:760px){body[class*=design-] .hero{grid-template-columns:1fr}}
.design-play .site-topline{background:var(--deep);color:#fff;border:0}
.design-play .site-header{border-bottom:3px solid var(--ink)}
.design-play .brand>span{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em}
.design-play .brand img{transform:rotate(-8deg)}
.design-play .hero h1{font-weight:800;letter-spacing:-.03em}
.design-play .hero-art .hero-image{border:3px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink)}
.design-play .hero-art figcaption{border:0;margin-top:18px}
.design-play .button{background:var(--accent);color:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.design-play .button:hover{background:var(--accent);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.design-play .topics{border:0;gap:14px}
.design-play .topics .topic{border:3px solid var(--ink);border-radius:18px;padding:20px 16px;background:var(--soft);transition:transform .15s}
.design-play .topics .topic:nth-child(2){background:#ffe0ec}
.design-play .topics .topic:nth-child(3){background:#d9f5e6}
.design-play .topics .topic:nth-child(4){background:#fff0b3}
.design-play .topics .topic:hover{transform:rotate(-1.5deg);color:var(--ink)}
.design-play .topic-number{font-family:var(--display);font-weight:800;font-size:18px;opacity:1;padding-top:0}
.design-play .section-symbol{color:var(--deep)}
.design-play .story h3{font-weight:700}
.design-play .story-image{border:3px solid var(--ink);border-radius:20px}
.design-play .image-arrow{border:2px solid var(--ink);border-radius:10px}
.design-play .notebook{background:var(--accent);border:3px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink)}
.design-play .notebook-icon{color:var(--ink)}
.design-play .round-link{background:var(--ink);color:var(--paper)}
.design-play .page-numbers{border:2px solid var(--ink);border-radius:10px}
@media(max-width:760px){.design-play .topics .topic{padding:16px 12px;border-width:2px}.design-play .hero-art .hero-image{box-shadow:5px 5px 0 var(--ink)}.design-play .notebook{box-shadow:5px 5px 0 var(--ink);border-radius:20px}}