/* Le cadre de démonstration reste indépendant de l’identité de chaque atelier. */
:root{--chromarty-demo-height:72px}
html{scroll-padding-top:calc(var(--chromarty-demo-height) + 20px)}
body[data-demo-notice]{padding-top:var(--chromarty-demo-height)}
.chromarty-demo-notice{position:fixed;inset:0 0 auto;z-index:10000;padding:10px max(20px,4%);padding-top:calc(10px + env(safe-area-inset-top,0px));background:#1c211e;color:#fffaf0;border-bottom:2px solid #dfb76f;box-shadow:0 3px 12px #0002;font:12px/1.5 system-ui,sans-serif;letter-spacing:0;text-align:left}
.chromarty-demo-inner{display:grid;grid-template-columns:auto 1fr auto;gap:12px 25px;align-items:center;max-width:1440px;margin:0 auto}
.chromarty-demo-label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;line-height:1.4;font-size:11px;font-weight:700;letter-spacing:.6px;color:#f3d38e}
.chromarty-demo-label>span:first-child{font-size:9px}
.chromarty-demo-brand{font-size:10px;letter-spacing:1px;color:#fffaf0}
.chromarty-demo-notice p{margin:0;font:12px/1.5 system-ui,sans-serif;color:#fffaf0}
.chromarty-demo-notice p>span{color:#e5e4dc}
.chromarty-demo-notice a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid #aaa99c;border-radius:3px;font:11px/1.4 system-ui,sans-serif;color:#fffaf0;text-decoration:none;text-align:center;white-space:nowrap}
.chromarty-demo-notice a:hover{background:#fffaf0;color:#1c211e}
.chromarty-demo-notice a:focus-visible{outline:3px solid #f3d38e;outline-offset:3px}
body[data-demo-notice] .skip-link{top:calc(var(--chromarty-demo-height) + 8px);z-index:10001}
body[data-demo-notice] dialog{max-height:calc(100dvh - var(--chromarty-demo-height) - 24px)}
.chromarty-dialog-notice{position:sticky;top:0;z-index:10;margin:0;padding:12px 18px;border-bottom:1px solid #bb8c3d;background:#fff1cd;color:#30291a;font:600 11px/1.5 system-ui,sans-serif;letter-spacing:0}
body[data-demo-notice] dialog .close-dialog,body[data-demo-notice] dialog .dialog-close{top:var(--chromarty-dialog-note-height,42px)}
@media(max-width:900px){.chromarty-demo-inner{gap:10px 16px}.chromarty-demo-notice p{font-size:11px}.chromarty-demo-label{font-size:10px}.chromarty-demo-brand{font-size:9px}}
@media(max-width:700px){:root{--chromarty-demo-height:112px}.chromarty-demo-notice{padding-right:16px;padding-left:16px}.chromarty-demo-inner{grid-template-columns:1fr auto;gap:4px 12px}.chromarty-demo-label{font-size:10px;gap:6px}.chromarty-demo-brand{font-size:9px}.chromarty-demo-notice p{grid-column:1/-1;grid-row:2;font-size:11px;line-height:1.5}.chromarty-demo-notice a{grid-column:2;grid-row:1;font-size:10px;padding:8px 11px;min-height:40px}.chromarty-dialog-notice{font-size:10px;padding:11px 15px}}
@media(max-width:380px){.chromarty-demo-label{font-size:9px;gap:5px}.chromarty-demo-brand{font-size:8px}.chromarty-demo-notice a{font-size:9px;padding:8px}.chromarty-demo-notice p{font-size:10px}}

/* L’accès direct au contenu ne s’affiche qu’au clavier. */
body[data-demo-notice] .skip-link:not(:focus-visible){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;transform:none}
body[data-demo-notice] .skip-link:focus-visible{position:fixed;top:calc(var(--chromarty-demo-height) + 8px);left:16px;width:auto;height:auto;margin:0;padding:12px 16px;clip-path:none;transform:none;background:#fffaf0;color:#1c211e;z-index:10001}
.demo-backtop{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9000;display:grid;place-items:center;width:44px;height:44px;border:1px solid #b8b5a8;border-radius:50%;padding:0;background:#fffaf0e8;color:#34382e;box-shadow:0 2px 8px #00000014;cursor:pointer;transition:background .15s,box-shadow .15s}
.demo-backtop[hidden],body:has(dialog[open]) .demo-backtop{display:none}
.demo-backtop:hover{background:#fffaf0;box-shadow:0 3px 12px #0002}
.demo-backtop:focus-visible{outline:3px solid #856548;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.demo-backtop{transition:none}}